>[success] # 清理構建包 ~~~ 1.在每次打包的時候，如果打包文件內容更改，會生成新的打包文件，并且上一次的依然保留， 如果想將改動文件對應的上次打包生成的文件清除掉需要使用'CleanWebpackPlugin' 安裝指令'npm i clean-webpack-plugin -D' ~~~ >[info] ## 使用 ~~~ 1.首先注意這是一個'插件（plugins）'不是一個'loader' ~~~ ~~~ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode:'production', entry: { index: './src/index.js', sreach: './src/hellowWebpack.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name][chunkhash:8].js' }, // 注意在這里配置的loader module: { rules: [{ test: /\.js$/, use: 'babel-loader' }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] // css 解析配置 }] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name][contenthash:8].css' }), new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index.html'), // 使用模板 filename: 'index.html', // 打包后的文件名 chunks: ['bundle'], // 打包后需要使用的chunk(文件) inject: true, // 默認注入所有靜態資源 minify: { html5: true, collapsableWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }), new CleanWebpackPlugin() // 清理文件 ] } ~~~ ~~~ const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin() // 清理文件 ] ~~~ >[danger] ##### 問答 ~~~ 1.沒有更改的文件，再次打包會重新生成新的么？ 答: 不會 ~~~