CleanWebpackPlugin
CleanWebpackPlugin은 빌드 이전 결과물을 제거하는 플러그인이다.
이 또한 웹팩 기본 플러그인이 아닌 써드파티 플러그인이라 따로 설치를 해야된다.
빌드 결과물은 아웃풋 경로에 모이는데 과거 파일이 남아있을 수 있다.
이전 빌드내용이 덮어씌워지면 상관없지만 그렇지 않으면 아웃풋 폴더에 여전히 남아있을 수 있다.
npm i -D clean-webpack-plugin
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const childProcess = require('child_process');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",
entry: {
main: "./src/app.js"
},
output: {
path: path.resolve('./dist'),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
// publicPath: './dist',
name: '[name].[ext]?[hash]',
limit: 20000, // 20kb
}
}
]
},
plugins: [
new webpack.BannerPlugin({
banner: `
Build Date: ${new Date().toLocaleString()}
Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
Author: ${childProcess.execSync('git config user.name')}
`
}),
new webpack.DefinePlugin({
TWO: JSON.stringify('1+1'),
'api.domain': JSON.stringify('http://dev.api.domain.com')
}),
new HtmlWebpackPlugin({
template: './src/index.html',
templateParameters: {
env: process.env.NODE_ENV === 'development' ? '(개발용)' : ''
},
minify: process.env.NODE_ENV === 'production' ? {
collapseWhitespace: true,
removeComments: true,
} : false
}),
new CleanWebpackPlugin()
]
}
CleanWebpackPlugin은 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 이런식으로 가져와야된다.
default export로 되어있지 않기 때문이다.
이 플러그인이 제대로 작동하는지 알아보기 위해 다음과 같이 dist 폴더에 새 파일을 하나 생성해보자.
CleanWebpackPlugin 플러그인이 작동한다면 foo.js 파일은 삭제될 것이다.
npm run build
위에 보면 foo.js 파일이 없어진 것을 확인할 수 있다.
깔끔한 빌드 결과물을 가져가기 위해서 CleanWebpackPlugin 플러그인으로 dist 폴더를 한번 삭제해주는 것이 좋다.