如何配置Webpack 5.x在构建前删除dist文件夹

Question

在下一次构建之前，我想删除上一个构建，因为如果我们不删除旧的构建，一些没有生成输出文件的更改可能不会尽快被发现。我正在尝试使用 package.json 中的此命令进行此操作：

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

但我觉得使用 rm -rf 命令可能有点危险，您有更好的建议吗？

- Dolphin

Answer 1

请查看文档：https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

添加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
},

};

- nerdess

---

有没有一种简单的方法可以在清理时忽略某个文件名？ - mitchell

@mitchell 为什么你想要这样做呢？每次运行构建时，webpack 会创建所有所需的文件并将它们放入构建文件夹中。 - nerdess

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 看到整个路径。

- Виктор Иванов