웹 패키지를 어떻게 설정하는지 알고 다음 항목에서 사용하세요!

본문은 최초로 발표되었다https://www.blog.duomly.com/what-is-webpack-and-how-to-setup-webpack/

웹 패키지 자습서 소개

Webpack은 소프트웨어 개발에서 자주 사용하는 도구로 매우 유용하다.많은 초급, 심지어 중급 개발자들에게 웹팩은 가장 어두운 악몽일 수도 있고, 나에게도 무서운 악몽일 수도 있다.그럼에도 불구하고, 나는 create-react-app 등 도구를 사용하여 새로운 ReactJS 프로그램을 구축함으로써 Webpack 설정을 피하고,ready 설정에서 어떤 변경도 할 필요가 없다. 왜냐하면 이것은 사람을 곤혹스럽게 하는 것 같기 때문이다.
그러나 모든 개발자에게 언젠가는 짐승을 물리치고 어떻게 일을 하는지 알고 특정한 프로젝트에 웹 패키지를 설치하여 소프트웨어를 더욱 효과적으로 만들 수 있을 것이다.
이 글에서 나는 당신이 이 곤혹스러운 개발 분야를 해결하는 데 도움을 주고 Webpack에 대한 기본 지식, 그것이 무엇인지, 우리가 왜 그것을 사용하는지, 그것이 어떻게 작동하는지, 가장 중요한 것은 Webpack을 어떻게 설정하는지에 대해 설명하고 싶습니다.
읽지 않고 보고 싶은 사람들에게는 예전과 같이 유튜브 채널에 동영상 강좌가 하나 있다.
우리 시작합시다!

웹 패키지란?

Webpack은 JavaScript 코드를 모든 브라우저가 이해할 수 있는 코드로 바인딩하고 축소하며 변환하는 웹 응용 프로그램에 사용되는 모듈 바인딩기입니다.Javascript 개발자로서 모듈을 들어보셨을 수도 있습니다.Webpack은 모듈에 대한 광범위한 정의를 가지고 있는데 ES 모듈, CommonJS 모듈, CSS 가져오기, 이미지 URL 또는 AMD 모듈을 고려했다.
중요한 것은 생산 환경에서 웹 페이지가 실제 페이지에서 사용되지 않는다는 것을 이해하는 것이다.그것은 개발 과정에서 운행한다.우리는 생활이 웹 패키지로 만들어진 묶음 코드라는 것을 알 수 있다.

웹 패키지는 어떻게 작동합니까?

Webpack은 응용 프로그램을 옮겨다니며 응용 프로그램의 정상적인 작업에 필요한 모듈로 구성된 의존 관계도를 만듭니다.다음은 의존 관계도를 바탕으로 새로운 패키지를 만들었습니다. 주로 bundle.js라는 파일이지만 블록으로 나눌 수도 있기 때문에 필요에 따라 작은 파일을 불러옵니다.Webpack에서 만든 패키지 파일은 응용 프로그램의 HTML 파일로 스크립트로 가져오고 응용 프로그램이 예상대로 작동하도록 합니다.
4.0 버전부터 Webpack 번들 프로젝트를 사용할 때 프로필을 만들 필요가 없지만, 프로필을 조정할 수 있는 것이 무엇인지 알고, 이 도구를 사용하면 더 많은 이익을 얻을 수 있다.
실행 가능한 구성을 만들려면 Webpack의 핵심 개념을 이해하는 것이 중요합니다.
Webpack 입구점은 Webpack이 의존 관계도를 어디서부터 구축해야 하는지를 표시합니다.이 점에서 프로그램의 정확한 기능을 제공하는 데 필요한 다른 의존 항목을 찾을 수 있다.기본값은 ./src/index.js입니다.
Webpack output은 웹 패키지에서 패키지 및 패키지 파일 이름을 보내는 지점입니다.기본적으로, 이것은 main.js, 폴더는 ./dist/ 이지만, 설정 파일에서는 프로그램의 다른 위치에 놓고 다른 방식으로 이름을 붙일 수 있습니다.
Webpack Loader는 기본적으로 JSON과 Javascript만 인식할 수 있으므로 다른 유형의 파일을 처리하는 데 사용됩니다.이것이 바로 우리가 추가 이미지나 스타일 설정을 필요로 하는 이유이다.로드 프로그램의 주요 임무는 이 원본을 유효한 모듈로 바꾸는 것입니다. 이 모듈들은 의존 관계도에 추가할 수 있습니다.고급 패키지 로더 설정에는 두 가지 속성이 있는데 test은 어떤 파일과 폴더를 변환해야 하는지 표시하고 use는 어떤 로더를 사용해야 하는지를 표시하는 데 사용된다.
Webpack 플러그인은 패키지 최적화나 환경 변수 주입 같은 보다 광범위한 작업을 수행하는 데 사용됩니다.플러그인을 사용하려면 require()를 사용하여 가져와 플러그인 진열에 추가해야 합니다.
Webpack mode는 응용 프로그램 환경이 무엇인지 알게 하는 매개 변수입니다.그것은 development, production 또는 none 값이 있을 수 있다.기본적으로 모드는 production로 설정됩니다.
좋아, 대부분의 중요한 웹 페이지 개념을 이해한 후에, 우리는 실용적인 웹 설정으로 전환할 수 있다.

웹 패키지는 어떻게 설정합니까?

현재, 나는 Webpack을 통해 간단한 자바스크립트 프로그램을 설정하고, 그것이 어떻게 작동하는지 점차적으로 보여 주고 싶다.이 자습서에서는 Webpack 5를 사용합니다.

웹 패키지 설치

새 프로젝트를 만들고 npm를 초기화합시다.

mkdir webpackTutorial && cd webpackTutorial

npm init -y

다음은 필요한 모든 도구를 설치합니다: webpack와 webpack-cli.

npm install webpack webpack-cli

이 절차가 성공적으로 끝난 후에 간단한 프로젝트 구조와 위조 코드를 포함하는 파일을 만듭니다.
프로젝트 폴더를 열고 src 폴더와 인덱스를 추가합니다.js 파일은 다음과 같습니다.
index.js 파일에 간단한 자바스크립트 코드를 추가해서 패키지를 구축하고 홈 페이지에 주입합니다.

const title = document.createElement('h3');
title.textContent = 'Webpack made easy!';

const page = document.querySelector('body');
page.append(title);

웹 패키지 구성

웹 패키지 설정부터 파일이 하나 더 필요합니다.루트 폴더에서 우리는 파일webpack.config.js을 만들고 먼저 프로그램 패키지의 입구점과 출력을 설정합니다.

const path = require('path')

module.exports = {
  entry: {
    index: path.resolve(__dirname, './src/index.js') 
  }
}

코드의 첫 줄에서 path 모듈을 가져왔습니다. 파일과 디렉터리 경로를 처리하는 실용 프로그램을 제공합니다.그것은 노드의 일부분이다.js.
그리고 Webpack에서 첫 번째 파일을 어디서 찾는지 알려 드리겠습니다. 이것은 의존 관계도를 만드는 기초가 될 것입니다.
다음에 우리는 폴더와 파일을 설정할 수 있습니다. 우리는 Webpack이 우리의 가방을 저장하기를 원합니다. 우리는 그것을 output로 설정합니다.

const path = require('path')

module.exports = {
  entry: {
    index: path.resolve(__dirname, './src/index.js') 
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].bunde.js'
  }
}

Webpack 설정의 출력 부분에서 패키지의 위치를 기본 ./build 폴더가 아닌 ./dist 폴더로 설정하고 파일 이름으로 변수를 전달했습니다. 따라서 패키지 파일의 [name] 은 항목 index.bundle.js 에 정의됩니다.
현재, 우리는 우리의 웹 패키지를 시도할 수 있다. 왜냐하면 우리는 최저 설정 준비가 있기 때문이다.package.json 파일을 열고 콘솔에서 Webpack을 실행하도록 조정합니다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

준비가 되면 컨트롤에서 항목을 열고 다음 명령을 실행합니다.

npm run build

완성되면 콘솔에서 아래 그림과 같은 내용을 볼 수 있을 것입니다.또한 번들 파일이 포함된 새 폴더를 응용 프로그램에서 볼 수 있습니다.그곳에는 아직 재미있는 일이 일어나지 않았지만, 이 구축은 존재한다.

웹 패키지 - Html 플러그인

이제 플러그인을 패키지 설정에 추가해서 더욱 유연하게 할 수 있는 방법을 보여 드리겠습니다.응용 프로그램에 HTML을 추가하려면 HTML을 만들어야 합니다. 이를 위해서는 Webpack 플러그인이 필요합니다.설치하십시오html-webpack-plugin.

npm install html-webpack-plugin

설치 후, 우리는 설정 파일로 돌아가 플러그인을 설정할 수 있습니다.

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "./src/template.html")
    })
  ]
}

구축을 계속 업데이트하기 전에 template.html 파일을 만들어야 합니다.

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="UTF-8">
    <title>Hello world!</title>
  </head>
  <body>
    Hello world!
  </body>
</html>

이제 번들을 다시 구축하고 브라우저index.html 폴더의 build 파일을 실행합니다.우리가 만든 HTML 파일의 내용과 index.js 파일에서 사용하는 텍스트를 볼 수 있어야 합니다.

웹 패키지 로더

자산이나 CSS 같은 다른 종류의 파일을 추가하려면, Webpack이 그것들을 이해하고, 컴파일하고 사용할 수 있도록 마운트 프로그램을 추가해야 합니다.코드에 그림을 추가하고 assets loader를 설정해야 합니다../src에 새 폴더를 만들고 자산으로 명명합시다.그림% 1개의 캡션을 편집했습니다.다음에 index.js 파일을 가져와 페이지에 추가해 보십시오.

import koala from './assets/koala.png'


...

const img = new Image();
img.src = koala;
page.appendChild(img);

패키지를 업데이트할 수 있도록 웹 설정에 마운트를 추가해야 합니다.

module: {
  rules: [
  {
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource',
  },
],
}

구문을 다시 실행하고 브라우저에서 파일을 새로 고침index.js한 다음 텍스트 아래에서 그림을 볼 수 있습니다.
이제 Webpack에서 스타일을 사용하는 방법을 배워봅시다.

웹 패키지 CSS 로더

간단한 스타일 파일을 만들고 가져오겠습니다. index.js

// style.css
body {
  text-align: center;
  margin: 20px;
}
h3 {
  color: #333333;
  background: #f5f5f5;
  padding: 20px;
}
img {
  max-height: 500px;
}

//index.js 
import './style.css';

현재, 이러한 변화를 보기 위해서, 우리는 CSS 로더를 설치해야 한다. style-loader 와 css-loader.

npm install css-loader style-loader

이것들이 모두 설치된 후에, 우리는 웹 페이지 설정으로 돌아가서, 마운트 규칙을 추가할 것이다.

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    },
    {
      test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
      type: 'asset/resource',
    },
  ],
}

이후에 우리는 가방을 다시 운행해서 우리의 스타일이 유효한지 확인할 수 있다.
쓸모가 있을 것 같아!

결론

축하합니다. 방금 간단한 웹 설정을 만들었습니다.
본문에서 우리는 무엇이 Webpack이고 Webpack이 어떻게 일을 하는지 토론했다.다음에 우리는 모든 패키지 설정을 구축하는 데 필요한 가장 중요한 패키지 개념을 소개했다.
나는 다음에 누군가가 Webpack에 대해 이야기하기 시작할 때, 이 지식들이 너에게 도움이 될 수 있기를 바란다.너는 이 거대한 웹 괴물을 더 이상 두려워하지 않을 수 있다는 전대미문의 자신감을 갖게 될 것이다.
내가 보기에, 네가 그것을 사용하는 목적이 무엇인지, 그것이 어떻게 작동하는지, 그리고 이런 개념들이 무엇을 책임지는지 알면 그렇게 어렵고 곤혹스럽지 않을 것이다.
읽어주셔서 감사합니다.
둠리에서 온 안나