Concepts
핵심은, webpack은 모던 JavaScript 어플리케이션의 정적 모듈 번들러라는 것이다. webpack 이 어플리케이션을 처리할 때, 내부적으로 모듈 디펜던시 그래프를 생성하여 하나 또는 그 이상의 번들을 생성한다.
4.0.0 버전 이후로, webpack 은 프로젝트를 빌드하기 위해 configuration file 이 필요 없다. 그럼에도 딱 맞는 설정을 할 수 있다.
webpack을 시작하기 위해서는, 핵심 컨셉을 이해할 필요가 있다.
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
이 문서는 high-level 오버뷰 이다.
Entry
entry point는 모듈 webpack 이 내부적인 디펜던시 그래프를 만들기 시작하는 지점이다. webpack은 entry point 와 직접적, 간접적 디펜던시가 있는 다른 모듈과 라이브러리를 구분 할 것이다.
기본 값은 ./src/index.js 이지만, webpack configuration 에 entry 프로퍼티를 설정하여 다른 entry point 값(들)을 명시 할 수 있다.
예를 들면,
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'
}
};
Output
output 프로퍼티는 webpack 에게 번들 파일들을 생성할 위치와 이름을 알려준다. 기본적으로 ./dist/main.js 이 주요 출력 파일이고 ./dist 폴더는 다른 파일들의 기본폴더이다.
설정으로 output 필드를 명시하여 설정할 수 있다.
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은 JavaScript 와 JSON 파일만 이해하는 반면, Loader는 다른 문법의 파일을 (예를들면, TypeScript, CoffeeScript ..) 유요한 JavaScript 파일로 변환하여 webpack이 디펜던시 그래프에 추가할 수 있도록 한다.
크게보면, loader는 webpack 구성에서 다음 두 가지 속성을 가진다.
- test 속성은 변환되어야하는 파일 또는 파일들을 나타낸다
- use 속성은 변환을 수행하는데 사용해야만 하는 loader 를 나타낸다.
webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
위의 설정에서 정의된 rules 속성은 두가지 프로퍼티가 요구된다. test 와 use
이것은 webpack의 컴파일러에게 다음과 같은 의미를 전달한다
헤이 webpack~
import 나 require() 의 경로에서 .txt 로 리졸브되는 경로를 발견하면,
번들에 추가하기 전에 raw-loader 를 사용하여 변환해줘
Plugins
loader 가 특정 타입의 모듈을 변환하는데 사용되는반면, 플러그인은 번들 최적화, 자원 관리, 환경변수 주입 등과 같은 좀 더 넓은 범위의 일들을 수행하는데 활용될 수 있다.
플러그인을 사용하기 위해서는, require()를 사용하여 로드하고 그것을 plugins 배열에 추가해야 한다.
대부분의 플러그인들은 옵션을 통해 커스터마이징 가능하다. 서로다른 목적으로 하나의 플러그인을 여러번 사용할 수 있으므로, 항상 new 연산자로 플러그인을 호출하여 인스턴스를 생성해야 한다.
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
위의 예에서는, html-webpack-plugin 이 모든 생성되는 번들을 자동적으로 인젝팅하여 어플리케이션에 HTML 파일을 생성한다.
webpack은 많은 플러그인을 제공한다.
webpack 설정에서 플러그인의 사용은 간단하지만, 좀 더 유심히 봐야할 경우가 있다. Learn more about them here.
Mode
mode 파라미터를 development, production 또는 none 으로 설정하면, 각 환경에 맞는 빌트인 된 webpack 최적화를 활성화 할 수 있다.
기본값은 production 이다.
Learn more about the mode configuration here and what optimizations take place on each value.
Browser Compatibility
webpack 은 IE8 이하를 제외한 모든 브라우저를 지원한다.
webpack 은 import()와 requrie.ensure()를 위해 Promise가 필요하다. 만약 오래된 브라우저 지원을 원한다면, 저 표현식을 사용하기 전에 polyfill 을 로드해야 한다.
