번들링과 웹팩에 대해 간단하게 정리

지인·2023년 3월 20일

TIL

목록 보기

9/17

번들링이란?

여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위. 프론트엔드 개발자에게 번들은 "사용자에게 웹 어플리케이션을 제공하기 위해 파일을 묶는 것"

번들링의 필요성

두 개의 .js 파일에서 같은 변수를 사용하고 있어, 변수 간 충돌이 발생한다. (예기치 못한 오류)
배포 코드가 너무 읽기 쉬워 프론트엔드 앱을 임의로 조작하여 피해가 발생했다.

웹팩이란?

webpack은 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다. 또한, 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다.

웹팩의 필요성

웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 코드를 가볍게 하기 위해 사용된다.
Webpack이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, Webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다.

웹팩 사용법

웹팩 라이브러리 설치

npm install webpack webpack-cli

웹팩 config 파일 작성
루트 폴더에 webpack.config.js 파일을 만들고, 원하는 설정을 적어준다. 최근 webpack은 설정파일 없이도 작동할 수 있게 업데이트 되었지만, webpack 설정을 다룰 줄 알아야 향후 더욱 다양한 외부 리소스를 사용하기 편하다.
번들링하기

npx webpack

(옵션) npm run build 설정하기
package.json 파일에서 npx build

  "scripts": {
		"build": "webpack", // here
    "test": "echo \"Error: no test specified\" && exit 1"
  },

웹팩의 핵심 개념

Entry
Output
Loaders
Plugins
Mode
Browser Compatibility

위 개념들은 webpack의 config 파일에서 모두 찾아 볼 수 있다.

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

어떤 환경을 컴파일할 것인지 지정해주는 부분이다.

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

Entry

Webpack은 이 Entry 를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.

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

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

Output

생선된 번들을 내보낼 위치와 이파일의 이름을 지정하는 법을 지정하는 부분이다.

const path = require('path');

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

Loader

Webpack은 기본적으로 JavaScript와 JSON 파일만 이해하나, Loader를 사용해 다른 유형의 파일을 처리하거나, 모듈로 변환해 디펜던시 그래프에 추가할 수 있다.

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

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(),
  ],
};