[개발자되기: 번들링과 웹팩] Day-50

번들링

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

Webpack 웹팩

FE 애플리케이션 배포를 위해 가장 많이 사용하는 번들러
여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

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

빌드

개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
cf) React : npm run build => React 빌드 작업이 진행되고 index.html 파일에 압축되어 배포에 최적화된 상태를 제공해 줌

번들링

파일을 묶는 작업
의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함되어있는 모듈
모듈 간 의존성을 파악해 그룹화 하는 작업

웹팩의 필요성

웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해 필요

Webpack 핵심개념

Target

기본값은 web. esX를 넣으면 지정된 ECMAScript 버전으로 컴파일 가능
Browser Compatibility와 연관된 속성

module.exports = {
  target: ["web", "es5"],
};

Entry

코드의 시작점
Entry 속성은 Entry point라고 하며 webpack의 내부 디펜던시 그래프를 생성하기 위해 사용해야하는 모듈

//기본 값
module.exports = {
	...
  entry: "./src/index.js",
};

//지정 값
module.exports = {
	...
  entry: "./src/script.js",
};

Output (출력)

생성된 번들을 내보낼 위치와 파일이름 지정방법을 webpack에 알려주는 역할

const path = require('path');

module.exports = {
	...
  output: {
    path: path.resolve(__dirname, "docs"), // 절대 경로로 설정을 해야 합니다. 
    filename: "app.bundle.js",
    clean: true
  },
};

기존 출력 파일: ./dist/main.js
생성된 기타 파일: ./dist

Loader (로더)

Webpack은 기본적으로 JS와 Json 파일만 이해하지만, loader를 사용하면 Webpack이 다른 유형의 파일을 처리하거나 그들을 유효한 모듈로 변환해 애플리케이션에 사용 가능하게 함

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

-test: 변환이 필요한 파일들을 식별하기 위한 속성
-use: 변환을 수행하는 데 사용되는 로더를 가르키는 속성
-exclude: 바벨로 컴파일하지 않을 파일 or 폴더 지정
-include: 반드시 컴파일해야할 파일 or 폴더 지저

test와 use 속성은 필수속성
반드시 module.rules 아래에 정의해야함. (rules 아래에 정의하면 경고 뜸)

Plugins (플러그인)

번들을 최적화, 에셋 관리, 환경변수 주입 등의 광범위한 작업 수행 가능

const webpack = require('webpack');
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 (최적화)

선택한 항목에 따라 최적화

module.exports = {
  ...
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
}; // mini-css-extract-plugin에 관련된 번들 최소화

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