[Bundling] 번들링과 웹팩

daun·2022년 7월 25일

기초지식

[기초지식]

목록 보기

17/25

번들링

번들링이란?

사용자에게 전달할 파일을 묶어주는 과정

웹팩이란?

여러개의 파일을 하나의 파일로 합쳐줌

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

웹팩 외에도 parcel, rollup 등의 다른 번들러들도 있다.

webpack은 왜 하는가?
일반적으로 유저는 하나의 웹 사이트에 접근하는 순간부터
2초 이내에 웹 페이지가 뜨지 않으면 굉장히 많은 수가 이탈함
따라서 로딩 속도를 개선하기 위해서는
브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것이었음
JS 뿐 아니라, HTML, CSS, .jpg, .png같은 이미지 파일도 모두 포함

1. entry

코드의 시작점

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

2. output

하나로 만들어진 파일을 어디로 보낼지 지정

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

3. loader

loader를 사용하면 js, json파일이 아닌 파일도 처리 가능
ex) CSS 합치기

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

4. plugin

번들 최적화, 에셋 관리, 환경 변수 주입 등 광범위한 작업 수행
플러그인 사용을 위해서는 require()를 통해 플러그인을 먼저 요청해야 함
ex) HTML 합치기

<webpack.config.js>
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(),
  ],
};