webpack에서 꼭 필요한 5가지의 플러그인!

2023년 03월 23일

INDEX

  1. webpack에서 플러그인은 무엇을 하나요?
  1. 무조건 사용해야하는 플러그인 3종

    2.1 html-webpack-plugin

    2.2 clean-webpack-plugin

    2.3 copy-webpack-plugin

  1. 사용하면 좋은 플러그인 2종

    3.1 terser-webpack-plugin

    3.2 mini-css-extract-plugin


1. webpack에서 플러그인은 무엇을 하나요?


webpack은 개발자의 관점에서 보고 읽기 쉬운 코드를 압축시켜서 짧은 하나의 js파일로 변환합니다.

그렇다면 플러그인은 무엇일까요?

Webpack의 플러그인은 빌드 과정 중에 추가적인 작업을 수행하거나, 빌드 결과물을 조작하는 등의 역할을 합니다.

무슨 말인지 모르시겠다구요? 그래도 일단 따라오세요. 이제부터 제가 꼭 필요한 플러그인 3가지와 사용하면 좋은 플러그인 2가지에 대해서 설명해드리겠습니다. 레쯔고


2. 무조건 사용해야하는 플러그인 3종


지금부터 무조건 사용해야 개발자로써 매우 편해지는 플러그인 3가지를 설명해드리겠습니다.


2.1 html-webpack-plugin


html-webpack-plugin은 HTML 파일을 자동으로 생성해주는 Webpack 플러그인입니다. 이 플러그인은 웹팩 빌드 시점에서 HTML 파일을 생성하며, 생성된 HTML 파일에 번들링된 자바스크립트와 CSS 파일을 자동으로 추가합니다.

이 플러그인을 사용하면 HTML 파일에서 번들링된 자바스크립트와 CSS 파일을 수동으로 추가하는 작업을 줄일 수 있습니다. 또한, 다양한 템플릿 엔진을 지원하므로, 프로젝트에 맞게 원하는 템플릿 엔진을 선택하여 사용할 수 있습니다.

html-webpack-plugin을 사용하려면, webpack.config.js 파일에서 다음과 같이 설정해야 합니다.

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
  ],
};

위의 예시 코드에서 template 옵션은 웹팩이 사용할 HTML 템플릿 파일의 경로를 설정하고, filename 옵션은 생성될 HTML 파일의 이름을 설정합니다. 이렇게 설정하면 웹팩 빌드 시점에서 template으로 지정한 HTML 파일을 기반으로 filename으로 지정한 이름의 HTML 파일을 생성하며, 해당 HTML 파일에 웹팩으로 번들링된 자바스크립트와 CSS 파일을 자동으로 추가합니다.


빌드폴더에 생겨난 index.html 파일 👇

또한 다양한 옵션이 존재합니다.

  • inject: 자동으로 생성된 script 태그를 HTML 파일에 삽입할 방법을 설정합니다. 설정값으로 true를 사용하면 body 요소의 마지막에 삽입하고, head 요소에 삽입하려면 head를 설정합니다. false를 설정하면 자동 삽입을 비활성화할 수 있습니다. 기본값은 true입니다.

  • minify: 생성된 HTML 파일을 최소화할지 여부를 설정합니다. 기본값은 false 입니다.

  • hash: 자동으로 생성된 script 파일명에 해시값을 추가할지 여부를 설정합니다. 캐시 갱신을 위해 사용됩니다. 기본값은 false입니다.


예를 들어, template 옵션을 사용하여 사용자 지정 HTML 템플릿 파일을 사용하고 싶은 경우, 다음과 같이 설정할 수 있습니다.

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/custom-template.html",
    }),
  ],
};

이렇게 설정하면, ./src/custom-template.html 파일을 사용하여 HTML 파일을 생성합니다.

또한, minify 옵션을 사용하여 생성된 HTML 파일을 최소화할 수 있습니다.

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [
    new HtmlWebpackPlugin({
      minify: true,
    }),
  ],
};

이렇게 설정하면, 생성된 HTML 파일이 최소화됩니다.


html-webpack-plugin 문서

2.2 clean-webpack-plugin


CleanWebpackPlugin은 웹팩 빌드 시점에서 이전 빌드 결과물을 자동으로 삭제하는 플러그인입니다. 이전 빌드 결과물이 삭제되지 않으면, 새로운 빌드 결과물이 이전 빌드 결과물과 섞이거나 충돌할 수 있습니다. 이러한 문제를 방지하기 위해 CleanWebpackPlugin을 사용합니다.

CleanWebpackPlugin을 사용하려면, webpack.config.js 파일에서 다음과 같이 설정해야 합니다.

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [new CleanWebpackPlugin()],
};

위의 예시 코드에서 CleanWebpackPlugin을 생성한 후, plugins 배열에 추가합니다. 이렇게 설정하면 웹팩 빌드 시점에서 이전 빌드 결과물이 자동으로 삭제됩니다.

CleanWebpackPlugin은 다양한 옵션을 제공하므로, 프로젝트에 맞게 설정할 수 있습니다. 일부 주요 옵션은 다음과 같습니다.

  • cleanOnceBeforeBuildPatterns: 빌드 이전에 삭제할 파일 경로를 설정합니다. 기본값은 ['**/*']으로, 모든 파일을 삭제합니다.

  • cleanAfterEveryBuildPatterns: 빌드 이후에 삭제할 파일 경로를 설정합니다.

  • verbose: 삭제되는 파일의 상세 정보를 출력합니다. 기본값은 false입니다.


예를 들어, cleanOnceBeforeBuildPatterns 옵션을 사용하여 build 폴더 내의 파일만 삭제하고 싶은 경우, 다음과 같이 설정할 수 있습니다.

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["build/*"],
    }),
  ],
};

이렇게 설정하면, 웹팩 빌드 시점에서 build 폴더 내의 파일만 자동으로 삭제됩니다.


clean-webpack-plugin 문서

2.3 copy-webpack-plugin


copy-webpack-plugin은 웹팩 빌드 시점에서 파일을 복사하는 플러그인입니다. 웹팩으로 빌드한 결과물 외에, 원하는 파일들을 추가로 복사할 수 있습니다. 저는 리액트의 public 아래에 존재하는 이미지, 문서 등등을 빌드후에도 사용하기 위해서 copy-webpack-plugin을 사용합니다.

copy-webpack-plugin을 사용하려면, webpack.config.js 파일에서 다음과 같이 설정해야 합니다.

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        // 복사할 파일 경로와 대상 경로를 설정합니다.
        { from: "source", to: "dest" },
        { from: "public/imgs", to: "imgs" },
        ,
      ],
    }),
  ],
};

위의 예시 코드에서 CopyWebpackPlugin을 생성한 후, plugins 배열에 추가합니다. patterns 옵션을 사용하여 복사할 파일 경로와 대상 경로를 설정합니다. from 속성은 복사할 파일 경로를, to 속성은 대상 경로를 설정합니다. from과 to는 모두 상대 경로이며, 기본적으로 웹팩 빌드 결과물 경로를 기준으로 합니다.

즉 두번째 패턴을 보시면 public/imgs의 폴더안에 존재하는 모든 파일들을 빌드후 build/imgs로 복사한다는 의미입니다.


빌드폴더에 복사된 파일 👇

또한, CopyWebpackPlugin은 다양한 옵션을 제공합니다. 일부 주요 옵션은 다음과 같습니다.

  • force: 이미 존재하는 파일을 덮어쓸지 여부를 설정합니다. 기본값은 false 입니다.

  • cleanStaleWebpackAssets: 이전 빌드 결과물 중 더 이상 사용되지 않는 파일을 삭제할지 여부를 설정합니다. 기본값은 true입니다.

  • flatten: 복사 대상 경로에 상위 경로를 포함시키지 않고, 파일명만 복사할지 여부를 설정합니다. 기본값은 false입니다.


예를 들어, force 옵션을 사용하여 이미 존재하는 파일을 덮어쓰도록 설정하고 싶은 경우, 다음과 같이 설정할 수 있습니다.

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  // ... 다른 설정
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: "source", to: "dest" }],
      options: {
        force: true,
      },
    }),
  ],
};

이렇게 설정하면, 이미 존재하는 파일을 덮어쓰도록 설정됩니다.


copy-webpack-plugin 문서


3. 사용하면 좋은 플러그인 2종


사용하지 않으면 큰일이 나지 않지만 사용하면 좋은 최적화 플러그인 2개를 소개합니다!

기본적으로 최적화 플러그인이기 떄문에 개발모드에서는 사용하지 않으며 배포모드에서 사용합니다. 저는 개발모드와 배포모드를 구별하기 위해서 webpack-merge를 사용해서 분리했습니다.


webpack-merge 웹팩 설정 파일을 개발, 배포 따로 설정해보자

3.1 terser-webpack-plugin


terser-webpack-plugin은 Webpack에서 JavaScript 코드를 압축하는 데 사용되는 플러그인입니다. uglifyjs-webpack-plugin와 비슷한 기능을 하지만, uglifyjs-webpack-plugin보다 더 나은 결과물을 생성하며, 속도도 더 빠릅니다.

또한 uglifyjs-webpack-plugin은 webpack 5에서 지원이 되지 않습니다.

Webpack 설정 파일에서 terser-webpack-plugin을 import하고, optimization 속성 안에서 사용할 수 있습니다. 아래는 terser-webpack-plugin의 간단한 예시입니다.

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // ...기타 설정
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 콘솔 로그 제거
          },
          format: {
            comments: false, // 주석 제거
          },
        },
      }),
    ],
  },
};

위 예시에서 minimize 속성은 Webpack이 번들링된 JavaScript 코드를 압축할지 여부를 설정합니다. minimizer 속성에는 Webpack이 사용할 압축 플러그인의 리스트를 설정합니다.

여기에서는 terser-webpack-plugin을 사용하고 있습니다. terserOptions 속성은 terser-webpack-plugin이 사용할 Terser 옵션을 설정합니다.

위 예시에서는 compress 옵션으로 콘솔 로그를 제거하도록 설정했습니다. 또한 format 옵션으로 주석을 제거하도록 설정했습니다.


3.2 mini-css-extract-plugin


mini-css-extract-plugin은 웹팩 빌드 시점에서 CSS 파일을 분리하여 추출하는 플러그인입니다. CSS 파일을 별도로 추출하면, 브라우저에서 CSS 파일을 캐시할 수 있어 초기 로딩 속도를 높일 수 있습니다.

mini-css-extract-plugin을 사용하려면, webpack.config.js 파일에서 다음과 같이 설정해야 합니다.

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ... 다른 설정
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

위의 예시 코드에서 MiniCssExtractPlugin을 생성한 후, plugins 배열에 추가합니다.

이후, CSS 파일을 처리하는 module.rules 설정에서 MiniCssExtractPlugin.loader를 사용하여 CSS 파일을 분리합니다.

MiniCssExtractPlugin은 다양한 옵션을 제공합니다. 일부 주요 옵션은 다음과 같습니다.

  • filename: 추출된 CSS 파일명을 설정합니다. 기본값은 main.css입니다.

  • chunkFilename: 추출된 CSS 파일의 청크(chunk) 파일명을 설정합니다. 기본값은 [id].css입니다.

  • ignoreOrder: CSS 파일 추출 순서에 대한 경고를 출력하지 않도록 설정합니다. 기본값은 false입니다.


예를 들어, filename 옵션을 사용하여 추출된 CSS 파일명을 styles.css로 설정하고 싶은 경우, 다음과 같이 설정할 수 있습니다.

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ... 다른 설정
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css",
    }),
  ],
};

이렇게 설정하면, 추출된 CSS 파일명이 styles.css로 설정됩니다.


빌드폴더에 생겨난 css파일 👇

이렇게 알아봤는데 이것만 알아도 웹팩을 시작하는데 문제가 없을것같습니다. ^^