'Webpack' 웹 개발 모듈 번들러

Published by Woong Geun Jang,

Webpack 공식문서의 Concepts를 요약한다.
(Webpack 사용법에 대한 설명은 공식문서가 너무나 잘되어 있다.
최근 본 문서 중에 제일 잘 쓴 것 같다. 꼭 보기를 바란다.)

Webpack
모던 자바스크립트 앱을 위한 static module bundler.
웹 클라이언트 개발은 크게 JS, HTML, CSS로 구성되고,
각각의 파트는 또 다른 여러 개의 모듈로 쪼개져서 개발된다.
그리고, 배포 단계에서는 각각의 스크립트타입마다 사용된 여러 파일들을 합쳐서 클라이언트로 전송하게 된다.
Webpack은 이 과정에서 여러 파일들의 의존성을 파악해서 필요에 따라 하나의 파일 또는 여러개의 bundle 파일을 빌드하는 역할을 한다.

결국, C++이나 JAVA에서 import, include를 하면 컴파일러가 의존성에 따라 묶어주는 역할을 수행하는 것

Webpack의 4가지 핵심컨셉은 다음과 같다.
  • Entry
  • Output
  • Loaders
  • Plugins

각각의 핵심컨셉은 뭐고 그래서 그 컨셉을 어떻게 설정하는지에 대해서 설명한다.

Entry
내부 의존성 그래프, 즉,
'이 자바스크립트가 또 어떤 자바스크립트를 참조하고 또 그 자바스크립트는 또 어떤 자바스크립트를 참조하냐?’
을 빌드하기 위해 진입점이 되는 파일.
이 진입점이 되는 파일은 webpack.config.js에서 아래와 같이 설정할 수 있다.
설정하지 않으면 기본값으로 ./src/index.js가 진입점이 된다.
module.exports = {
entry: './path/to/my/entry/file.js'
};

Output
어디로 bundles을 복사할 것인지, 그리고 이름은 뭘로 할 것인지를 설정한다.
기본값으로 ./dist/main.js다.
마찬가지로 web pack.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은 JavaScript 언어만 이해할 수 있는데,
Loaders는 webpack이 다른 유형의 파일들을 처리하고 적절한 모듈로 변환할 수 있도록 해서,
다른 앱에서 사용하거나 의존성 그래프에 추가될 수 있도록 한다.
보면, .css파일도 import 문법으로 의존성을 추가할 수 있어서 굉장히 일관적이다.
그런데 이렇게 css파일도 import로 추가하는 기능은 다른 번들러나 테스크러너에는 없는 기능이라고 한다.

로더는 두 가지 설정 변수가 있는데 다음과 같다
  • test
    변환 대상이 되는 파일이나 파일들
  • use
    변환을 담당할 Loader

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'
}
};

공식사이트에 위에 config의 역할이 잘 설명되어 있다.
"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle."

주의할 점은, loader rule은 module.rules에 정의되는 것이고, 그냥 rules에 정의되는 것이 아니다.

Plugins
Loader가 특정 타입의 모듈을 변환하는데 사용되는 반면, 플러그인은 좀 더 전역적으로 태스크를 수행한다.
예로 들어, 번들 최적화, asset management, 환경변수 injection 등

사용하려면, 플러그인은 require()하고 plugins 배열에 추가하면 된다.
동일한 플러그인이 여러 번 사용될 수 있기 때문에 new 키워드를 통해 새로운 인스턴스를 추가해야 한다.
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

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

핵심컨셉 외로, Mode도 있다.

Mode
mode 값을 설정하면, 각각의 환경에 맞는 webpack의 기본 최적화를 활성화할 수 있다.
기본값은 production
module.exports = {
mode: 'production'
};