번들링과 웹팩

번들링

💡 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음
💡 필연적으로 용량을 줄이고 파일을 통일하는 툴링 작업이 필요

웹팩

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

📗 모듈 번들러
HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구

-JavaScript 코드 양의 증가, 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션의 등장
-세분화된 모듈 파일이 폭발적으로 증가
-모듈 단위의 파일들을 호출해 브라우저에 출력하려고 함
-JavaScript 언어의 특성인 각 변수들의 스코프 문제 해결 필요, 각 자원을 호출할 때에 생겨나는 네트워크 코스트 문제 해결 필요

✅ 하나의 시작점(Ex. React App의 index.js 등)으로부터 의존성을 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장

📗 웹팩에서의 모듈
JavaScript뿐만 아니라 HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 포함한 포괄적인 개념

✅ 빌드 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
✅ 번들링 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업

📗 필요성

-같은 타입의 파일들을 묶어서 요청 및 응답을 받아 네트워크 코스트 감소 효과
-웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 추구하여 사용자 이탈 방지

✅ Webpack loader JavaScript ES6의 문법들을 ES5로 번환해주는 babel-loader를 사용
✅ Webpack4 버전 이상 Develoment, Production 두 가지의 모드를 지원
*Production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화 작업을 지원

웹팩의 핵심 개념

📗 Target

//webpack.config.js
module.exports = {
  target: ["web", "es5"],
};

✅ web 기본값, 브라우저와 동일한 환경에서 컴파일
-sX ECMAScript 버전으로 컴파일
✅ es5 작성된 코드를 es5 버전으로 컴파일(Browser Compatibility)

📗 Entry
Entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾음

//webpack.config.js
module.exports = {
  entry: "./src/index.js",
};

📗 Output
생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려줌

//webpack.config.js
const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js", // 정적 관리
    //동적 관리
    // filename: "[fullhash].bundle.js",
    clean: true // 번들링 할 때마다 디렉토리 정리
  },
};

📗 Loader
웹팩은 기본적으로 JavaScript와 JSON 파일만 이해 가능 하지만 loader를 사용하면 다른 유형의 파일도 처리 가능

//webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, //파일명이 .css로 끝나는
        use: ["style-loader", "css-loader"],//css다음 style 적용됨
        exclude: /node_modules/, //제외
      },
    ],
  },
};

CSS minify 적용

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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

✅ module.rules 아래에 정의
✅ test 필수, 변환이 필요한 파일
✅ use 필수, 변환을 수행하는 로더
✅ exclude 변환하지 않을 파일

📗 Plugins
번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행

//webpack.config.js
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부터는 선택한 항목에 따라 최적화를 실행

//webpack.config.js
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

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

✅ minimize TerserPlugin 또는 optimization.minimize에 명시된 plugins. bundle 파일을 압축시키는 작업 여부를 결정
✅ minimizer defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의

추가

번들링 실습하기 페이지