[웹지식] 번들링, 웹팩에 대한 개념정리

번들링

• 웹 파일 (html, css, js) + (기타 static 파일, png, jpeg 등등)을 배포하기 쉽도록 용량을 줄여 묶어주는 방법
• 웹팩은 프론트엔드 애플리케이션 배포를 위해 현재 가장 많이 사용하는 번들러이다.
• 모던 웹에 진화에 맞추어 많은 양의 자바스크립트 모듈을 세분화하여 번들링을 해주어야하는데 웹팩은 의존성을 가지는 자바스크립트 모듈을 모두 추적하여 하나의 결과물을 만드는데 최적화 되어있다.
• 이 외에도 ES6 자바스크립트 문법을 ES5로 변환해주는 bable-roader 도 웹팩에 포함되어있어 매우 유용하다.

웹팩의 핵심 개념

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

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 : 타겟은 어떠한 환경에 맞추어 번들링을 할지 결정한다.
• Entry : 웹팩의 번들링 시작점 경로를 의미한다.
• Output : 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정한다.
• Loaders : Webpack이 다른 유형의 파일도 처리할 수 있도록 설정을 추가할 수 있다.
  • test: 변환이 필요한 파일들을 식별하기 위한 속성
  • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
  • exclude: 바벨로 컴파일 하지 않을 파일/폴더 지정
• Plugins : 번들을 최적화하거나 에셋을 관리, 환경변수 주입 등의 광범위한 작업을 수행
• Mode : 웹팩의 모드
• Browser Compatibility : 최적화에 대한 옵션 설정