번들링(Bundling)과 웹팩(Webpack)

번들링(Bundling)

- 번들(bundle) : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음.

- 번들링(bundling) : 파일들을 하나의 꾸러미(bundle)로 묶어 압축시켜 사용자에게 전달하는 방식.

- 알집으로 여러 파일들을 한 곳에 압축시키는 모습과 비슷하다.

- 사용자가 브라우저 주소창을 입력하면, 마치 알집을 풀듯 하나로 묶여져있던 파일들이 실행되면서 사용자에게 제공된다.

- 번들링의 목적 : '빠른 로딩 속도', '높은 성능', '코드 보안'을 위해서라고 할 수 있다.

 

 

웹팩(Webpack)

- 현재 기준, 애플리케이션 배포를 위해 전세계에서 가장 많이 사용되는 번들러(Bundler).

- 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러.

- 모듈 번들러 : HTML, CSS, JS 등의 자원을 각각의 모듈로 보고 이를 모두 조합하여 하나의 묶음으로 빌드(번들링)하는 도구.

- 로더(loader) : JS 파일 뿐만 아니라 다양한 파일도 번들링 시켜주는 도구(웹팩은 기본적으로 JS와 JSON 파일만 이해함).

- 빌드(build) : 애플리케이션을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업(명령어 : npm run build).

- 번들링(bundling) : 모듈 간의 의존성 관계를 파악해 그룹화하는 작업.

 

 

웹팩으로 번들링 시 작성하는 주요 코드 항목

• target :
  • 디폴트 값: 'web'
  • 'exX'를 넣으면 해당 ECMAScript 버전으로 컴파일
• entry :
  • 번들링의 시작점(Entry point). 지정되는 해당 모듈(파일)을 시작으로 의존성 모듈과 라이브러리를 찾아서 타고 올라감. 
  • 디폴트 값 : ./src/index.js'
• output :
  • 빌드된 번들을 내보낼 위치와 파일 이름 지정법을 웹팩에 알려주는 역할.
  • 디폴트 값 : ./dist/main.js
  • path 속성 사용 시, path 모듈을 사용해야 하며, 절대 경로로 설정해야 함.

const path = require('path');

• module :
  • 로더(loader)와 그 속성에 대해 기술하는 곳.
    • test: 변환이 필요한 파일들을 식별하기 위한 속성 (mandatory)
    • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성 (mandatory)
    • exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정. (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)
• plugins :
  • 번들을 최적화, 에셋 관리, 환경 변수 주입등의 작업 수행을 가능하게 해줌.
  • 플러그인을 사용하려면, require() 플러그인을 먼저 요청해야 한다.
  • 플러그인은 요청한 플러그인을 new 연산자를 사용해서 호출하여 인스턴스로 만들어서 사용한다.

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

• optimization : 
  • 최적화해주는 역할
    • minimize : TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정.
    • minimizer : defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의 가능.

 

[코드 예시]

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(),
    ]
  }
};