🐕
webpackで不要ファイルを削除する[clean-webpack-plugin]の使い方
作成日:
2022/01/03
1
clean-webpack-pluginをインストール
npm install --save-dev clean-webpack-plugin
package.jsonを確認
{
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.5.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"node-sass": "^7.0.1",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
webpack-config.jsで設定を追加
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//ここから追加
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//ここまで追加
module.exports = {
entry: './src/index.js',
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.(css|sass|scss)/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg|gif|svg)/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
//ここから追加
new CleanWebpackPlugin()
//ここまで追加
]
}
webpackを起動
npm run build
build結果は・・・?
一度dist/内が削除され、ファイルが生成される。
その過程で不要ファイルは削除される。
事業会社にてコーダーをしています。制作は6年目。
インプットしたことをアウトプットしています。