Unit3 - [React] 번들링과 웹팩

번들링

사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

 

번들링의 필요성

웹 페이지에서 필요로 하는 모든 리소스(HTML, CSS, JavaScript, 이미지 등)를 한 번에 요청하고 받을 수 있게 해준다.

이것은 웹 페이지의 로딩 시간을 줄이고 사용자 경험을 향상시키는 데 도움이 된다.

또한, 번들링을 통해 모듈 시스템을 구현할 수 있다.

이는 개발자가 코드를 더욱 모듈화하고, 재사용성을 높일 수 있게 해준다.

또한, 번들러를 사용하면 자바스크립트 코드를 최적화하고 압축할 수 있다.

이는 웹 페이지의 로딩 속도를 높이고, 데이터 전송량을 줄여서 사용자 경험을 향상시키는 데 도움이 된다.

Webpack

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

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

 

빌드와 번들링

빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업

번들링는 파일을 묶는 작업 그 자체를 말하며 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함 되어 있는 모듈을 의미

 

빌드는 소스 코드를 실행 가능한 프로그램으로 변환하는 과정이고, 번들링은 여러 파일을 하나의 파일로 합치는 과정

 

Webpack의 필요성

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

 

웹팩의 핵심 개념

 

Target

Webpack은 다양한 환경과 target을 컴파일

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

이 config 파일은 브라우저와 동일한 환경에서 사용하기 위하여 컴파일할 것이며,

작성된 코드를 es5 버전으로 컴파일 하겠다고 지정

 

Entry(엔트리)

코드의 시작점

 

//기본 값
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
  },
};

 

Loader(로더)

Webpack은 기본적으로 JavaScript와 JSON 파일만 이해

그러나 로더사용=> Webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가

 

module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.css$/, 
        //변환이 필요한 파일들을 식별
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        //변환을 수행하는데 사용되는 로더를 가리킴
        exclude: /node_modules/,
        //바벨로 컴파일하지 않을 파일이나 폴더를 지정
      },
    ],
  },
};

 

Plugins(플러그인)

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

const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
//html-webpack-plugin 은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
};

Optimization(최적화)

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

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