Webpack 설정 - 라이브러리

지난 번에는 Webpack이 무엇인지, 기본 설정은 어떻게 하는 것인지에 대해 알아봤다. 이번에는 Webpack을 설정할 때 필요한 라이브러리에 대해 알아보려고 한다.
결과물은 이전 게시글의 webpack.config.js 코드에서 볼 수 있다.

2023년 12월 기준 설치한 라이브러리 버전은 다음과 같으니 참고바란다.

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "eslint-config-prettier": "^9.1.0",
    "html-webpack-plugin": "^5.5.4",
    "mini-css-extract-plugin": "^2.7.6",
    "prettier": "^3.1.1",
    "terser-webpack-plugin": "^5.3.9",
    "ts-loader": "^9.5.1",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }

HTML

webpack-dev-server

개발환경에서 서버를 실행하기 위해서는 다음 라이브러리를 설치해야한다.

> npm i -D webpack-dev-server

그리고 webpack.config.js에 다음 설정을 추가해주어야 한다.
개발 환경의 webpack과 프로덕션 환경의 webpack을 따로 설정해주는 방법으로는 다음과 같은 방법이 있다.
1. webpack.dev.js, webpack.prod.js 로 나누어 설정하는 방법
2. webpack.config.js에서 함수로 작성 후 환경변수로 넘겨주는 방법

여기서는 개발 환경이라고 생각하고 작성했으나, 두 번째 방법을 보고싶다면 이전 게시글의 webpack.config.js를 참고바란다.

  module.exports = {
  	...,
    devServer: {
      static: { directory: path.join(__dirname, "dist") },
      watchFiles: "./index.html",
  	}
  };

static.directory는 절대경로여야하며, output의 위치와 같게 설정하면 된다.
watchFiles는 파일 변경 사항을 감시할 파일을 설정하면 되며, 배열로 다양한 값을 설정할 수 있다. 설정된 파일들은 페이지를 새로고침하지 않아도 자동으로 변경사항이 적용된다.

html-webpack-plugin

해당 플러그인을 사용하면 번들된 파일을 html에 자동으로 삽입해준다.
따라서, 번거롭게 html 파일에 번들된 스크립트를 불러오기 위한 태그를 추가하지 않아도 된다.
다음 명령어를 사용하여 설치할 수 있다.

> npm i -D html-webpack-plugin

설정 방법은 다음과 같다. 사용하기전 해당 라이브러리를 변수로 불러와야한다.

// webpack.config.js

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

module.exports = {
	...
    plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html",
        inject: "body",
        favicon: "./favicon.png",
      }),
    ],
}

template은 스크립트를 추가할 html파일의 경로를 입력하면 된다. 번들 시 파일 이름을 변경하고 싶은 경우에는 filename 설정을 추가하면 된다.
예를 들어, 아래와 같은 경우

template: "./home.html",
filename: "./result.html"

최상위 디렉터리에 있는 home.html 파일을 dist(output으로 설정된 디렉터리)의 result.html로 생성하고 번들된 스크립트를 삽입해준다.

inject를 설정하지 않으면 head태그에 번들된 스크립트 파일이 추가된다. 설정 시에는 body의 마지막 태그로 추가된다. 개인적으로 스크립트 파일은 body의 마지막에 위치하는 것을 선호하므로 해당 설정을 추가해준다.

CSS

style-loader

style-loader는 html파일에 css파일들을 style 태그로 추가한다. style-loader는 css-loader와 함께 쓰여야한다. 그 이유는 아래에서 다시 설명하겠다.
해당 라이브러리는 다음과 같이 설치할 수 있다.

> npm i -D style-loader css-loader

설정은 다음과 같다. use의 배열 순서가 달라지면 안되니 주의바란다.

// webpack.config.js
module.exports = {
	...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
 }

css-loader

css-loader 라이브러리 추가와 설정 방법은 style-loader와 함께 설명했다.
css-loader는 js파일에 css파일을 불러올 수 있도록 한다.
따라서 다음과 같이 불러올 수 있다.

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

console.log('Hello, World!');

css-loader가 다른 라이브러리와 함께 쓰여야하는 이유는 css-loader로 불러온 css파일을 다른 라이브러리가 재해석하여 사용할 수 있기 때문이다.
예를 들어, style-loader의 경우
css-loader로 불러온 css파일을 style-loader를 사용하여 style태그로 변환할 수 있다.

mini-css-extract-plugin

이전 게시글을 보면 style-loader 대신 MiniCssExtractPlugin을 사용했다.
MiniCssExtractPlugin는 스타일 태그로 삽입하는 게 아닌 css파일을 head 태그에 link로 삽입해준다.
해당 라이브러리는 다음과 같이 설치할 수 있다.

> npm i -D mini-css-extract-plugin

설정 방법은 다음과 같다.
1. module
: 스타일 태그로 삽입하는 역할 (MiniCssExtractPlugin.loader)
: 마찬가지로 css-loader가 필요하며 use에서 위치가 바뀌면 안된다. 또한, 사용하기 전 라이브러리를 불러와야한다.
2. plugins
: js파일에서 불러온 css파일들을 한 파일로 번들하는 역할

// webpack.config.js

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

module.exports = {
	...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "./style.css",
      }),
    ],
 }

css-minimizer-webpack-plugin

번들 된 css파일을 최적화(압축)한다.
다음과 같이 설치가능하다.

> npm i -D css-minimizer-webpack-plugin

설정 방법은 다음과 같다. 마찬가지로 라이브러리를 불러온 후 설정해야한다.
webpack build 후 output으로 생성된 폴더의 css파일을 확인하면 압축된 것을 확인할 수 있다.

// webpack.config.js

const CSSMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
	...
    optimization: {
      minimizer: [new CSSMinimizerPlugin()],
    },
 }

압축된 css파일 확인

JavaScript

babel-loader

자바스크립트를 컴파일하기 위해 필요하다. 아래 코드에서 볼 수 있듯이 관련 라이브러리를 모두 설치해주어야 한다.

> npm install -D babel-loader @babel/core @babel/preset-env

@babel/core는 babel의 핵심 core모듈이다.
@babel/preset-env는 자바스크립트 최신 문법을 사용할 수 있도록 해준다. 간혹 지원되지 않는 문법이 있을 수 있으니 확인 후 해당 폴리필을 작성하거나 라이브러리를 설치해야한다.
targets 속성을 사용해서 지원할 브라우저를 설정할 수 있다.

module: {
  rules: [
    {
      test: /\.(?:js|mjs|cjs)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ],
          plugins: ['@babel/plugin-proposal-class-properties'],
        }
      }
    }
  ]
}

ts-loader

typescript를 사용하는 환경에서는 ts-loader를 사용하면 된다.
추가적으로 tsconfig.json를 작성해야하며 webpack은 해당 파일의 설정값으로 파일을 build한다.

> npm i -D typescript ts-loader

test에서 js, jsx를 추가하면 javascript 파일도 tsconfig.js 설정값을 따르게 된다.

module: {
    rules: [
      { test: /\.(js|jsx|ts|tsx)$/, loader: "ts-loader" }
    ]
  }