번들링과 웹팩(WebPack)

번들링

• 잡지를 사면 게임 CD를 주는 것과 같은 원리
• 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
• 프론트엔드에서는 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
• 사용자는 브라우저를 열고 주소를 입력하면, 프론트엔드 개발자가 번들링한 여러 파일을 받는다.
• 용량을 크게 줄여줘 로딩 속도 시간을 줄여주고 높은 성능을 얻을 수 있다.

WebPack

• webpack은 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러다.
• 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러이며, HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 조합해 하나의 묶음으로 번들링하는 도구이다.
• 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능함
• npm run build를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해 준다.
• 로딩 시간이 길어질수록 사용자의 이탈률이 급격하게 증가하므로 번들러는 무조건 필요하다.
• Development, Production 두 가지의 모드를 지원하고, Production 모드는 사용자가 느끼기에 더욱 쾌적한 환경 및 보안까지 신경써준다.
  • Target - webpack은 다양한 환경과 target을 컴파일한다. 기본 값은 web이다.
  • Entry - 입구, 코드의 시작점, Entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.
  • Output - 출구, 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 알려주는 역할
  • Loader - webpack은 기본적으로 Js와 JSON 파일만 이해하는데 loader를 사용하면 다른 유형의 파일도 처리 가능하다.
    • test - 변환이 필요한 파일들을 식별하기 위한 속성
    • use - 변환을 수행하는데 사용되는 로더를 가리키는 속성
    • exclude - 바벨로 컴파일하지 않을 파일이나 폴더를 지정
  • Plugins - 번들을 최적화하거나 에셋을 관리하고, 환경변수 주입 등의 광범위한 작업을 수행할 수 있다. require()를 통해 플러그인을 먼저 요청해야함
  • Optimization - 버전 4부터는 선택한 항목에 따라 최적화를 실행
    • minimize - 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(),
    ]
  }
};