webpack 自动清理构建目录产物

自动清理构建目录产物

当前构建时的问题

每次构建的时候都不会清理目录，造成构建的输出目录 output 文件越来越多

rm -rf ./dist && webpack
rimraf ./dist && webpack

方法有点笨

自动清理构建目录

避免构建前每次需要手动删除 dist

npm install clean-webpack-plugin -D

使用 clean-webpack-plugin， 默认会删除 output 指定的输出目录

// 注意，这里有个个坑
// 翻了官方文档发现用法变了,而中文文档还没有更新过来
// 之前是这么写 const CleanWebpackPlugin = require('clean-webpack-plugin');
// 现在要解构一下
// react 文档真的坑
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name][chunkhash:8].js',
    path: __dirname + './dist'
  },
  plugins: [
    new CleanWebpackPlugin();
  ]
}