webpack的clean-webpack-plugin插件

在使用webpack打包时，打包后的文件名如果一样，那么每次打包后，新生成的文件就会将之前打包的文件覆盖掉，但是如果给输出的文件名设置根据内容生成的hash值后，由于每次打包后生成的文件名的hash值会不一样，这样就不会因文件名相同而覆盖原来的文件，在文件目录中出现了一些多余的文件；如果每次都手动清除这些多余文件也是很麻烦的，webpack的clean-webpack-plugin插件可以很好的帮助我们完成每次打包前的文件清除工作。

效果如下：

clean-webpack-plugin插件使用方法：

安装clean-webpack-plugin插件

npm install -D clean-webpack-plugin

在webpack.config.js文件中配置：

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  ...
  plugins: [
    ...
    new CleanWebpackPlugin()
    ...
  ]
  ...
}

重新打包即可生效，更多关于clean-webpack-plugin插件的使用方法可以查看clean-webpack-plugin

参考文献：
[1] webpack学习之打包生成新的文件时 自动删除上次打包出来的文件
[2] webpack 打包生成新的文件时 自动 删除上次打包出来的文件