웹팩의 4가지 핵심 개념

webpack는 유명한 정적 모듈 번들러입니다. 모듈 번들러는 Javascript 모듈을 브라우저에서 실행할 수 있는 단일 파일로 묶는 데 사용됩니다. 코드의 종속성을 관리하고 종속성 순서에 따라 자산을 로드하는 데 도움이 됩니다.

웹팩에는 네 가지 기본 개념이 있습니다: entry , output , 모듈 및 플러그인 .

이러한 구성은 프로젝트의 webpack.config.js에 추가됩니다.

1. 입장

entry 및 output는 서로 관련되어 있습니다.

웹팩.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

위의 스니펫은 entry 구성의 예입니다. 당신은 기본적으로 webpack이 의존성 그래프를 생성하기 시작할 때 살펴보아야 할 가장 첫 번째 파일을 말하고 있습니다. 종속성 그래프는 이 항목 파일에서 시작한 다음 종속성 및 종속성 등의 종속성을 빌드합니다. webpack는 이러한 모든 종속성을 거쳐 모듈을 생성한 다음 전체 애플리케이션에서 이 전체 프로세스를 반복합니다.

2. 출력

output 구성은 webpack에 번들과 해당 형식을 배치하는 방법과 위치를 알려줍니다. 예를 들어 아래의 output 값을 사용하면 my-first-webpack.bundle.js가 있는 동일한 디렉토리 아래의 dist 폴더에 있는 webpack.config.js 라는 자바스크립트 파일에 번들을 넣도록 webpack에 지시합니다.

웹팩.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

3. 규칙 및 로더

rules 및 loaders 구성은 종속성 그래프에 추가되기 전에 다른 파일 유형을 처리하고 유효한 모듈로 변환하는 방법을 지시합니다webpack.
loaders에는 일반적으로 다음과 같은 두 가지 속성이 있습니다.

test . test 속성은 처리될 파일의 ​​유형을 알려줍니다.

use . use 속성은 웹팩에 파일 처리에 사용할 로더를 알려줍니다.

예를 들어, 이전에 작성된 구성에서 빌드하면 아래의 modules 속성이 webpack에 다음과 같이 알려줍니다.

"Hey webpack compiler, when you come across a path that resolves to a .css file inside of a require()/import statement, use the css-loader to transform it before you add it to the bundle."

웹팩.config.js

const path = require('path');
const ExamplePlugin = require('ExamplePlugin.js')

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [
        { 
          test: /\.css$/, 
          use: 'css-loader' 
        }
    ],
  },
  plugins: [
     new ExamplePlugin()
  ]
};

4. 플러그인

플러그인을 사용하면 모든 종류의 기능을 수행할 수 있습니다. 로더는 특정 유형의 모듈을 변환하는 데 사용되지만 플러그인은 번들 최적화, 자산 관리, 환경 변수 삽입, 파일 축소 등과 같은 더 넓은 범위의 작업을 수행하는 데 활용될 수 있습니다. 예를 들어 아래의 예제 플러그인은 메시지를 인쇄합니다. "Hello I am learning" webpack을 실행할 때마다. Webpack에는 이미 풍부한 플러그인 컬렉션이 있으므로 개발자는 휠을 재발명하기 전에 플러그인을 확인할 수도 있습니다.

class ExamplePlugin {
   apply(compiler) {
      compiler.plugin("run", (compiler, callback) {
         console.log("Hello I am learning");
         callback();
      });
   }
}

저는 여전히 웹팩을 배우는 과정에 있지만 이러한 개념을 이해하는 것만으로도 개발자의 요구에 맞는 웹팩 구성을 자신 있게 생성하는 데 도움이 될 것이라고 믿습니다.

참조
[1] Webpack Official Documentation
[2] Webpack Academy