WebPack 으로 번들링 하기

웹팩(Webpack)이란 프론트엔드 개발자와 같이 개발자들이 만든 애플리케이션을 배포할 때 가장 많이 사용되는 번들러이다.

애플리케이션 구동에 필요한 수많은 파일들을 하나로 묶어주는 기능을 하게된다.  같은말로 HTML, CSS, JavaScript 각 파일들을 개별 모듈로 구분해서 하나의 묶음으로 번들링해주는 하나의 툴이다.

Webpack의 예

이제 웹팩 내부의 기능을 알아보게 되면 웹팩 공식홈페이지에선 6가지 속성을 주요 핵심 개념으로 안내하고 있다.

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Entry는 영어 뜻과 같이 입구라는 뜻과 유사하게 또 React의 index.js와 마찬가지로 코드 시작점으로 이해하면 된다.

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

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

위와 같이 따로 지정하지 않게되면 기본값인 index.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란 내가 어떤식으로 보고싶은지 원하는 버전을 입력해서 변환을 하게 하도록 지정하는 것이라고 보면 된다.

웹팩은 기본적으로 JavaScript와 JSON파일만 이해하기 때문에 로더로 변환이 필요하다. 예를들어 ES6 문법을 ES5로 변환 해주거나 Vue의 경우 vue-loader를 사용해서 변환을 하고, scss파일의 경우 css로 변환하게끔 해주는 scss-loader 도
존재한다.

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

test와 use의 속성은 필수 속성이고 유의할점은 module 객체 안에 module.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(),
  ],
};

일단 플러그인을 사용하기 위해서 require()을 통해 요청해야 하며, plugins 배열 내부에 사용하려는 플러그인을 작성해야 한다. 플러그인은 사용자가 옵션을 통해 직접 지정할 수 있고, 다른 목적으로 플러그인을 어려번 사용하게 만들수 있다.
이를 감안해서 여러가지 객체를 생성할 때 유용한 클래스를 만들고 new 연산자를 통해서 인스턴스를 생산할 수 있도록 만들어 주어야 한다.

위의 코드에서 html-webpack-plugin 은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성해주고, mini-css-extract-plugin은 CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원한다.