[번들링과 웹팩] (1) - 번들링, 웹팩

Today I Learned

• 번들링
• 웹팩

번들링 (Bundling)

번들링이란 여러 것들을 묶어서 패키지로 제공하는 행위로, 현대 웹 개발에서 프론트엔드 개발자에게 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이다.
HTML, CSS, JavaScript 등으로 이루어진 웹 애플리케이션을 만들어 배포할 때 여러 개로 흩어져 있는 파일들을 하나의 파일로 묶어주는 번들링 과정을 거친다.

번들링이 필요한 이유 및 장점

• 서로 다른 JavaScript 파일 간의 충돌을 방지 할 수 있음
• 배포 파일의 공백을 최소화 하는 등 압축하여 파일 용량을 줄여 성능을 향상시킬 수 있음
• 배포 파일의 코드를 난독화하여 사용자가 애플리케이션을 조작할 수 없도록 보안성을 높일 수 있음

---

웹팩 (Webpack)

웹팩(Webpack)은 2022년 7월, 현재 기준으로 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 모듈 번들러이다.

위의 이미지에서와 같이 웹팩은 JavaScript 외에도 다양한 파일을 번들링한다.

웹팩은 같은 타입의 파일들을 묶어서 요청하고 응답 받을 수 있게 하기 때문에 네트워크 코스트를 줄일 수 있고, Webpack loader를 이용하면 ES6 문법으로 작성한 코드를 ES5로 변환해주는 babel-loader나 scss 파일을 css 파일로 변환해주는 scss-loader 등을 사용할 수도 있다.

웹팩4 버전 이상부터는 Develoment, Production 두 가지의 모드를 지원하는데 Production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다.

---

웹팩의 핵심 개념

아래 예시와 같이 webpack.confing.js을 작성해 웹팩에 대한 설정을 할 수 있다.

webpack.config.js

module.exports = {
  target: ["web", "es5"],
  entry: {
    app: "./src/app.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].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의 기본 값은 web이다.
아래 코드의 경우, 웹 플랫폼을 위해 런타임 코드를 생성하고, 작성된 코드를 ES5로 컴파일 하도록 지정했다.

nodule.exports = {
  target: ["web", "es5"],
}

Entry

webpack이 번들 빌드를 시작하는 지점이다. webpack은 이 Entry 속성을 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.

module.exports = {
	...
  entry: {
    app: "./src/app.js"
  },
};

Output

빌드된 번들 파일을 내보낼 위치와 해당 파일의 이름을 지정한다. path 속성을 사용할 때는 path 모듈을 사용해야만 한다.

const path = require('path');

module.exports = {
	...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true // 내보내기 전에 output 디렉터리를 정리함
  },
};

Module

다른 유형의 모듈을 처리하는 방법을 결정한다. module.rules 속성을 통해 로더를 모듈에 적용시키거나 파서를 수정함으로써 모듈 생성 방법을 수정할 수 있다.

Loaders

Webpack의 loaders를 사용하면 파일을 전처리 할 수 있다. loader를 이용하면 JavaScript가 아닌 모든 정적 리소스도 번들링할 수 있게 된다.

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
};

test : 변환이 필요한 파일들을 식별하기 위한 속성 (필수 속성)
use : 변환을 수행하는 데 사용되는 로더를 가리키는 속성 (필수 속성)
exclude : loader를 적용하지 않을 폴더나 파일을 지정하기 위한 속성

Plugins

Plugins를 사용하면 번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행할 수 있게 된다.

plugins 배열에 사용하고자 하는 플러그인을 new 연산자를 사용해 호출해 해당 플러그인의 인스턴스를 추가해야 한다. ( 인스턴스로 추가하는 것은 다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있기 때문 )

플러그인 종류 참고

const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
};

Optimization

웹팩4 버전부터는 선택된 모드에 따라 최적화를 실행한다. 최적화하기 위해 다양한 옵션이 지원되는데, 대표적으로 minimize, minimizer 등을 사용한다.

• minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화시키는 작업 여부를 결정
• minimizer : default minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의 할 수 있다.

예제에서는 mini-css-extract-plugin에 관한 번들을 최소화하도록 지시하고 있다.

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