[Webpack] 웹팩 Loader & Plugin 옵션 설정하기!

💡 Loader 옵션의 필요성 : 웹팩은 기본적으로 자바스크립트 파일과 JSON 파일만을 이해해서 css나 이미지 파일들을 번들링하려고 시도하면 에러가 발생한다. Loader 옵션은 해당 파일들을 자바스크립트로 변환해주는 역할을 해주기 때문에 필요한 옵션이다!

Loader 패키지 설치

npm install -D css-loader style-loader file-loader

• 웹사이트를 구성하고 있는 css 파일과 이미지 파일들을 자바스크립트로 변환해주기 위해 위의 3개 패키지를 설치해준다.

웹팩 설정 파일에 Loader 적용

module.exports = {
  module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(png|jpg|gif)$/i,
          use: ["file-loader"],
        },
      ],
    },
}

• Loader를 적용하기 위해 위와 같은 옵션 작성이 필요하다.

• test는 정규식 형태로 작성해주어야하며, use 프로퍼티에는 사용할 loader가 배열 타입으로 들어간다.

• 배열 안에 두 가지 이상의 loader가 존재하는 경우, 오른쪽에서 왼쪽 순으로 실행된다.

• 위 설정 후 번들링을 수행하면 css 파일들과 이미지 파일들이 js로 변환된 것을 확인할 수 있을 것이다.

💡 Plugin의 필요성 : Loader 보다 좀 더 다양한 역할을 수행한다. 예를 들어, 번들링 파일이 생성되는 방식 수정, 환경 변수 주입 및 압축 작업을 수행한다.

Plugin 패키지 설치 후 설정 파일 적용

1. HtmlWebpackPlugin

npm install -D html-webpack-plugin

• HtmlWebpackPlugin은 번들 파일을 포함하는 HTML 파일을 자동으로 생성해준다.

• 설치를 했으니 이제 webpack 설정 파일에 적용할 차례다!

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

module.exports = {
  plugins: [new HtmlWebpackPlugin()],
  // 기존 html 파일 내용을 그대로 사용하고 싶은 경우
  // plugins: [new HtmlWebpackPlugin({template: 'index.html'})]
}

• 설정 파일 내 plugins 옵션에 위에서 설치했던 패키지를 적용시킨다.

• 번들링 후 결과
  

  • 설정 파일 수정 후 번들링을 진행하면 dist 폴더 내에 html 파일이 생성된다.
  • 해당 html 파일을 보면, 번들 파일이 자동으로 script 태그를 통해 들어가 있음을 알 수 있다.

2. TerserPlugin

• 해당 플러그인은 webpack 버전 5 이상이라면 따로 설치할 필요 없이 기본 제공하는 패키지이다.

• 자바스크립트 압축 도구이자 파서인 terser를 이용해 자바스크립트 코드를 경량화하는 역할을 해준다.

• webpack 설정 파일에 적용

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

module.exports = {
  optimizatios: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false, // 코드 내 주석을 다른 파일로 분리할지
      }),
    ],
  },
};

여러 가지 Plugin들을 적용한 최종 설정 파일

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // CSS를 자바스크립트 번들에 포함하지 않고 별도의 파일로 분리
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // CSS 최적화, 최소화
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // output.path 속 파일들 제거 (이전 번들 결과 제거용)

module.exports = {
  entry: "./src/javascript/index.js",
  output: {
    path: path.resolve(process.cwd(), "dist"),
    filename: "[name].[contenthash].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "index.html" }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

다음번엔 webpack-dev-server에 대해서 알아보겠다!