webpack 打包生成新的文件时 自动 删除上次打包出来的文件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hjh15827475896/article/details/86306369

当webpack 打包时的 filename 设置的是 固定的名称时，每次打包的时候，新的文件会覆盖原来的文件，这样就不用删除原来的 output 出来的文件夹

但是如果 filename = "[name].bundle.[hash:5].js" 这样的有占位符的文件名，每次生成的文件名是不一样的，也就不会去覆盖上次生成的文件，手动每次打包前，去先把 output的目录给删除掉就太麻烦了

这时我们可以使用 webpack提供的一个小插件  clean-webpack-plugin

用法：

安装  ： npm install clean-webpack-plugin

在webpack.config.js中配置

let CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports={
    entry:{
        ...
    },
    output:{
        ...
    },
    module:{
        rules:[
            ...
        ]
    },
    plugins:[
        new CleanWebpackPlugin([
            "./dist"
        ]),   //参数是一个数组，数组中是需要删除的目录名
    ]
}