번들링과 웹팩

전형호·2023년 3월 20일

번들링이란?

사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록, 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이다.

웹팩이란?

최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다.

모듈 번들러란?

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

모듈이란?

프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미한다. 보통 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 따로 모듈을 구성한다. 이러한 모듈을 합쳐 하나의 파일로 작성하는 방식으로 프로그램을 만들게 된다.

웹팩에서의 모듈

JavaScript 외에도 HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 포함한 포괄적인 개념이다.

웹팩의 필요성

웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다.
- Webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다.
개발자는 본인이 원하는 최선의 개발 방식을 선택해 개발할 수 있게끔 지원하기도 한다.
- Webpack loader를 사용하면 일부 브라우저에서 지원하지 않는 JavaScript ES6의 문법들을 ES5로 번환해주는 babel-loader를 사용할 수 있게 됩니다. Vue인 경우는 vue-loader를, scss 파일 같은 경우는 css 파일로 변환해주는 scss-loader 등의 loader도 사용할 수 있다.
Production 모드로 번들링을 진행할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원하기도 한다.

웹팩의 핵심 개념

Entry
Output
Loaders
Plugins
Mode
Browser Compatibility

Entry

엔트리는 번들링을 시작하기 위한 최초 진입점이다.
Entry 속성은 Entry point라고도 하며, webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈이다.

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

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

Output

엔트리를 시작으로 의존되어 있는 모든 모듈을 하나로 묶어 하나의 결과물로 만들었다. 이 결과물이 위치하는 경로를 Output이라고 한다.
path 는 번들링된 파일을 저장할 경로이고, filename은 번들링된 파일의 이름이다.
path 에는 경로를 직접 입력할 수 있지만, 아래와 같이 많이 사용하는 것 같다.
__dirname 은 노드에서 제공하는 현재 디렉토리의 경로에 대한 변수이다.

const path = require('path');

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

Loader

loader를 사용하면 Webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.

test는 변환이 필요한 파일들을 식별하기 위한 속성
use는 변환을 수행하는데 사용되는 로더를 가리키는 속성
exclude는 바벨로 컴파일하지 않을 파일이나 폴더를 지정. (반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)

CSS를 번들링하기 위해서는 css-loader 와 style-loader 를 함께 사용한다. css-loader 는 CSS를 자바스크립트 코드로만 변경해주기만 한다. 자바스크립트로 변경된 CSS를 돔에 추가하기 위해서 style-loader 가 필요하다.

CSS 번들링을 위해 css-loader와 style-loader 를 설치한다.

npm install css-loader style-loader -D

css-loader 와 style-loader 에 관련된 설정을 추가한다.

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

Plugins

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

HTML파일 번들링하기 위해 HtmlWebpackPlugin 을 설치해준다.

npm install html-webpack-plugin -D

플러그인을 사용하기 위해서는 require()를 통해 플러그인을 먼저 요청해야 한다.

const webpack = require('webpack');

new 연산자를 사용해 호출하여 플러그인의 인스턴스를 만들어줘야 합니다.

new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),

HtmlWebpackPlugin 에 관련된 설정을 추가해준다.

const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");


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

전형호

코드스테이츠 블로그

이전 포스트