1) Webpack 이란?
2) 설치 및 사용
$ npm install -D webpack webpack-cli
$ webpack
$ webpack --config prod.config.js
3) entry와 output
module.exports={
entry: './src/js/main.js'
}
module.exports={
entry: './src/js/main.js'
articles :'./src/js/article.js'
}
// 혹은
entry : ['./src/js/main.js','/src/js/article.js']
module.exports={
output:{
filename:'bundle.js'
}
}
-path 옵션을 통해 저장될 파일의 경로도 지정할 수 있다.
module.exports={
entry :
output:{
path : path.resolve(process.cwd(), 'dist'),
filename:'bundle.js'
},
}
//process.cwd()는 현재 프로세스가 실행되고 있는 경로를 나타내며 path.resolve()는 인자로 넘어온 경로를 조합하는 역할을 수행. 두 가지 모두 Node.js에서 자주 사용되는 API
module.exports={
entry :
output:{
path : path.resolve(process.cwd(), 'dist'),
filename:'bundle.js'
},
}
css의 캐싱문제로 빌드시마다 cs파일의 내용이 수정되어도 항상 동일한 파일명(main.css)으로 생성되기 때문에 브라우저에서 동일한 파일로 인식하여 캐싱된 css파일을 불러오는 문제가 발생할 수 있다. 그래서 캐싱문제를 해결하기 위해 번들 결과시에 생성되는 파일명을 설정할 수 있다.
다음과 같이 src 디렉토리에 3개의 파일이 있다고 가정해보자. (index.js, index.css,vendors.js)
Entry Points를 활용하여 index와 vendors라는 이름을 가진 두 개의 chunk로 분리하고자 설정하였으며 css파일의 경우 따로 파일을 분리하고자 MiniCssExtractPlugin를 사용하였지만 index.js 와 index.css는 동일한 chunk로 생각할 수 있다.
// webpack 설정 내용
entry: {
index: ["./src/index.js", "./src/index.css"],
vendors: ["./src/vendors.js"]
},
output: {
filename: "[name].[어떤옵션일지].js"
}
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[어떤옵션일지].css"
})
]
Chunk란 번들러에 의해 생성되는 하나의 코드 덩어리를
Dynamic Import나 Entry Points 등을 활용하여 분리된 파일들을 의미한다.
먼저, npm 의존성을 설치한다.
$ npm install -D css-loader style-loader file-loader
module.exports = {
module : {
rules : {
test:/\.css$/,
use : ['style-loader','css-loader'],
},
{
test : /\.(png|jpg|gif)$/i,
use : ['file-loader'],
},
],
},
}
test는 정규식 형태로 작성하며, use에 작성한 Loader는 왼쪽에서 오른쪽으로 순차적으로 실행
번들링을 다시 실행하면 성공적으로 번들 파일이 생성, 생성된 번들 파일에서 css 파일의 내용이 자바스크립트로 변환된다.
Loader가 특정 파일을 자바스크립트로 변환한다면 plugin은 더 광범위한 역할을 수행
plugin은 번들 파일이 생성되는 방식을 수정할 수도 있으며, 환경 변수 주입, 난독화 및 압축과 같은 작업을 수행
1) HtmlWebpackPlugin
HTML 파일에서 번들링 결과로 생성된 번들 파일을 사용하려면 <script>
태그를 사용하여 추가해야 한다.
하지만 만약 번들 파일명에 hash 값이 포함되거나 파일명이 자주 변경된다면 매번 <script>
태그에서 파일명을 수정하기 번거롭다.
HTMLWebpackPlugin을 사용하면 이런 비효율적인 작업을 자동화 할 수 있다.
HtmlWebpackPlugin은 번들 파일을 포함하는 HTML 파일을 자동으로 생성해주고 번들 파일을 주입
$ npm install -D html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins : [new HtmlWebpackPlugin()]
}
HTML 파일에는 번들된 파일을 가져오는 <script>
태그가 자동으로 추가되어 있다.
기존에 존재하는 HTML 파일을 사용할 때는 다음과 같이 설정한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins : [
new HtmlWebpackPlugin({template : 'index.html'})
]
}
template 옵션을 기존 HTML 파일로 설정한다면 해당 파일의 내용을 기준으로 HTML 파일을 생성하고 번들 파일을 주입해줌.
2) TerserPlugin
const TerserPlugin = require('html-webpack-plugin');
module.exports = {
optimization : [
minimize : true,
minimizer : [new TerserPlugin({extractComments: false})
]
}
MiniCssExtractPlugin : css 파일을 자바스크립트 번들에 포함하는 것이 아닌 별도의 css 파일로 분리해준다.
CssMinimizerPlugin : CSS 자원을 분석하여 최적화 및 최소화를 해주는 plugin이다.
CleanWebpackPlugin : output.path에 위치한 파일을 모두 제거. 이전의 번들 파일 결과를 삭제하기 위해 사용한다.