Webpack이란?

Webpack에 대해 알아보겠습니다.

Webpack

Webpack은 모던 자바스크립트 애플리케이션을 위한 정적(static) 모듈 번들러입니다.

Webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 종속성 그래프를 만듭니다.

Webpack을 이용해 자바스크립트 변수의 유효 범위 문제를 해결할 수 있고, 사용하지 않는 모듈, 코드를 제외할 수 있으며(tree-shaking), dynamic-loading과 lazy-loading 기능을 사용할 수 있습니다.

핵심 개념은 다음과 같습니다.

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

Entry

엔트리 포인트는 Webpack이 내부의 종속성 그래프를 생성하기 위해 사용해야 하는 모듈입니다.

Webpack은 엔트리 포인트가 직/간접적으로 의존하는 다른 모듈과 라이브러리를 찾아냅니다.

// webpack.config.js
module.exports = {
  entry: "./path/to/my/entry/file.js"
};

Output

출력 속성은 생성된 번들을 내보낼 위치와 해당 파일의 이름을 지정하는 방법을 Webpack에 알려줍니다.

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js"
  }
};

Loaders

Webpack은 기본적으로 자바스크립트와 JSON 파일만 이해하기 때문에, 로더를 사용해 Webpack이 다른 유형의 파일을 처리하거나 그들을 유효한 모듈로 변환하여 애플리케이션에 사용하거나 종속성 그래프에 추가합니다.

test 속성은 변환이 필요한 파일들을 식별하고, use 속성은 변환을 수행하는 데 사용되는 로더를 가리킵니다.

// webpack.config.js
const path = require("path");

module.exports = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }]
  }
};

Plugins

로더는 특정 유형의 모듈을 변환하는 데 사용되지만, 플러그인을 활용하여 번들을 최적화하거나 애셋을 관리하고, 또 환경변수 주입 등과 같은 광범위한 작업을 수행할 수 있습니다.

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack"); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }]
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })]
};

Mode

Webpack에 내장된 환경별 최적화를 돕습니다. development, production, none이 있습니다.

// webpack.config.js
module.exports = {
  mode: "production"
};

참고

webpack