如何在构建之前配置webpack5.x以删除dist文件夹

Question

在下一次构建之前，我想删除上一次构建，因为如果我们不删除旧的构建，可能无法尽快找到一些没有生成输出文件的更改。我现在正试图在package.json中使用以下命令来完成这项工作：

"dev": "rm -rf src/bundle && webpack --mode development --config build/webpack.dev.config.js",

但我觉得rm -rf命令的这种方式可能有点危险，还有更好的建议吗？

Answer 1

查看文档：https://webpack.js.org/guides/output-management/#cleaning-打开dist文件夹

添加clean:true

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
print: './src/print.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true
},

}；

Answer 2

我解决了以下问题

plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'template.pug'),
filename: 'index.html', 
}),
new FileManagerPlugin({
events: {
onStart: { 
delete: [
{
source: path.join(__dirname,'dist/').replaceAll('\','/'), 
options:{
force: true,
recursive : true,
},
},
],
},
},
})

因为你需要指定完整的路径并用/替换所有\，这样webpack就能看到整个路径