[React] 웹팩의 핵심 개념

Webpack's key concept

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

webpack의 config 파일을 보며 위에서부터 알아보겠습니다.

module.exports = {
  target: ["web", "es5"],
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

Target

Webpack은 다양한 환경들과 target을 컴파일합니다. target은 따로 설정하지 않으면 기본값인 web으로 설정되며, 이 부분에는 web 외에도 다양한 환경을 설정 할 수 있습니다.

위의 예시에선 es5를 target 배열안에 넣었습니다. 따라서 작성된 코드를 es5 버전으로 컴파일 하게 됩니다.

Entry (Entry point)

들어가다, 입장의 사전적 의미를 갖는 것에서 알 수 있듯이 webpack에서의 entry는 개발자가 작성한 코드의 시작점이라고 말할 수 있습니다.

webpack은 이 entry point를 기반으로 의존하는 다른 모듈과 라이브러리를 찾아냅니다. 기본값은 "./src/index.js"입니다.

Output

생성된 번들을 출력할 위치와 이름을 지정하는 속성입니다.
출력 파일은 기본적으로 "./dist/main.js"에, 기타 파일의 경우 "./dist" 폴더로 설정됩니다.
위의 예제에서는 output.path로 내보낼 위치를 지정하고 있습니다. path 속성을 사용할 때에는 path 모듈을 사용해야만 합니다.

Loader

Webpack은 기본적으로 JS와 JSON 파일만 읽을 수 있습니다. 하지만 loader를 사용하면 다른 유형의 파일을 처리하거나, 사용가능한 모듈로 변환하여 사용하거나, 디펜던시 그래프에 추가할 수 있습니다.

• test: 변환이 필요한 파일을 식별하기 위한 속성입니다.
• use: 변환을 수행하는데 사용되는 로더를 가리키는 속성입니다.
• Babel로 컴파일하지 않을 location을 지정하는 속성입니다. (반대로 include 속성을 사용하여 반드시 컴파일해야 할 location을 지정 할 수 있습니다.)

test와 use를 필수 속성으로 지니고 있으며, 이들은 module.rules 아래에 정의해야 합니다.

Plugins

Plugin을 사용하여 번들을 최적화 하거나 에셋을 관리하고, 환경변수 주입 등 광범위한 작업을 수행합니다.

plugin을 사용하기 위해서 먼저 require()를 통해 plugin을 요청해야합니다. 그리고 plugins 배열에 요청한 plugin을 추가해주어야 합니다. 이때, 다른 목적으로 plugin을 여러 번 사용하도록 new 연산자를 사용해 호출하여 plugin의 인스턴스를 만들 수 있습니다.

Optimization

Webpack 버전 4부터 지원하는 최적화 설정입니다.
최적화하기 위한 수단으로 다양한 옵션들이 지원되지만 대표적으로 minimize와 minimizer 등을 사용합니다.

• minimize: TerserPlugin 또는 optimization.minimize에 명시된 plugins로 번들 파일을 최소화 시키는 작업 여부를 결정합니다.
• minimizer defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공하여 재정의할 수 있습니다.