설정
webpack.config.js
webpack.config.js 라는 이름의 파일로 webpack의 사용자 정의의 설정을 할 수 있다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
설정 요소들
Entry
module.exports = {
entry: './path/to/my/entry/file.js',
};
//------------------
entry: {
APage: './src/AScript.js',
BPage: './src/BScript.js',
CPage: './src/CScript.js'
};
엔트리 포인트는 webpack이 빌드될 때 최초의 진입점이자, 의존성 그래프의 시작점이라고 생각하면 된다. 의존성을 생각할 때, 페이지가 여럿으로 나뉜다면 다음과 같이 여러 개의 엔트리 포인트를 설정할 수 있다. (웹팩을 실행할 대상 파일, 그 진입점과 경로 정의. 보통 웹 애플리케이션의 전반적인 구조와 내용이 들어있어 있는 메인 JS 파일을 지정한다. )
Output
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',
},
};
아웃풋은 웹팩을 사용하고 나서 나오는 결과물에 대한 설정이다. path는 결과물의 위치, filename 결과물의 파일 이름을 설정하는 요소이다.
지금 설정으로 폴더 이름은 dist, 번들 파일 이름은 my-first-webpack.bundle.js이다. 이 번들 파일을 script로 연결시키면 된다.
Loaders
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
로더는 자바스크립트 파일이 아닌 애플리케이션의 요소들을 번들링할 때, 이것들을 변환하는데 있어서 적용할 일종의 변환 규칙들이다. 여러 타입의 파일을 처리하고, 애플리케이션에서 사용하게 변환하고, 의존성 그래프에 추가한다. 예시에서 test 요소는 규칙이 적용될 파일을 가르키는데 예시에서는 .txt 파일에 적용되는 것이다. 그 적용되는 규칙은 raw-loader이다.
- test: 로더를 적용할 “파일 유형” (CSS, JS..등등)
- use: 로더 이름
로더를 불러오는 방법으로는 3가지가 있다.
- 설정파일 (추천하는 방법)
- 인라인
- CLI
Plugins
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' })],
};
플러그인은 webpack을 위한 확장 기능이다. 넓게 보면 번들 최적화, 에셋 관리, 환경요소 주입 등의 일들에 있어서 도움을 준다.
플러그인를 사용하는 방법으로는 2가지가 있다.
- 설정파일 (추천하는 방법)
- Node API
- Mode
module.exports = {
mode: 'production',
};
