웹팩

• 번들링: 여러 제품이나, 코드, 프로그램을 나누어서 패키지로 제공하는 행위
• 번들: 개발자에게 있어서, 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 의미함

1. 웹팩

• 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
  • 모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구
  • 빌드: 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업
  • 번들링: 의존적 관계에 있는 파일들 혹은 내부적으로 포함되어 있는 모듈들을 묶는 작업

 

1-1. 웹팩 핵심 개념

// webpack.config.js 파일 예시
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(),
    ]
  }
};

 

• Target: 기본값은 web. 아무것도 적용하지 않으면 기본값으로 적용
• Entry(엔트리)
  • 작성한 코드의 시작점
  • Entry point라고도 함
  • webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈
  • 적절히 설정하면 여러 entry point를 지정할 수 있음
• Output(출력): 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정할 수 있음
• Loader(로더): Webpack은 기본적으로 JavaScript와 JSON 파일만 이해할 수 있는데, loader를 이용하면 다른 유형의 파일을 처리하거나 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있음
  • test: 변환이 필요한 파일들을 식별하기 위한 속성. 필수
  • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성. 필수
  • exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정 (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)
• Plugins(플러그인)
  • 번들을 최적화, 에셋 관리, 환경변수 주입 등 광범위한 작업 수행 가능
  • 플러그인 사용하기 위해서는 require()를 통해 플러그인을 먼저 요청해야 함. 그리고 plugins 배열에 사용하고자 하는 플러그인을 추가해야함
• Optimization(최적화) 
  • Webpack 버전 4부터 가능
  • 최적화하기 위한 옵션
    • minimize: TerserPlugin 또는 optimization.minimize에 명시된 plugins로 bundle 파일을 최소화(=압축)시키는 작업 여부를 결정
    • minimizer: defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의 가능

 

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

module.exports = {
  entry: "./script.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
    clean: true,
  },
  module: {
    rules: [
      {
        // 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,

        // 바열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
        // 먼저 css-loader가 적용되고 styled-loader가 적용되어야 함
        // css-loader 는 CSS를 JS파일 내에서 불러올 수 있음
        // style-loader 는 불러온 CSS를 style 요소 내에 담아줌
        use: ["style-loader", "css-loader"],

        // loader가 node_modules 안의 내용도 처리하기 때문에
        // node_modules는 제외해야 함
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
    }),
  ],
};