번들링
- 웹 파일 (html, css, js) + (기타 static 파일, png, jpeg 등등)을 배포하기 쉽도록 용량을 줄여 묶어주는 방법
- 웹팩은 프론트엔드 애플리케이션 배포를 위해 현재 가장 많이 사용하는 번들러이다.
- 모던 웹에 진화에 맞추어 많은 양의 자바스크립트 모듈을 세분화하여 번들링을 해주어야하는데 웹팩은 의존성을 가지는 자바스크립트 모듈을 모두 추적하여 하나의 결과물을 만드는데 최적화 되어있다.
- 이 외에도 ES6 자바스크립트 문법을 ES5로 변환해주는 bable-roader 도 웹팩에 포함되어있어 매우 유용하다.
웹팩의 핵심 개념
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
target: ["web", "es5"],
entry: "./src/script.js",
output: {
path: path.resolve(__dirname, "docs"),
filename: "app.bundle.js",
clean: true
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(),
],
optimization: {
minimizer: [
new CssMinimizerPlugin(),
]
}
};
- Target : 타겟은 어떠한 환경에 맞추어 번들링을 할지 결정한다.
- Entry : 웹팩의 번들링 시작점 경로를 의미한다.
- Output : 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정한다.
- Loaders : Webpack이 다른 유형의 파일도 처리할 수 있도록 설정을 추가할 수 있다.
- test: 변환이 필요한 파일들을 식별하기 위한 속성
- use: 변환을 수행하는데 사용되는 로더를 가리키는 속성
- exclude: 바벨로 컴파일 하지 않을 파일/폴더 지정
- Plugins : 번들을 최적화하거나 에셋을 관리, 환경변수 주입 등의 광범위한 작업을 수행
- Mode : 웹팩의 모드
- Browser Compatibility : 최적화에 대한 옵션 설정