webpack中使用clean-webpack-plugin

webpack中使用clean-webpack-plugin

由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。

clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。

npm install clean-webpack-plugin --save-dev

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  // 此代码是官方教程，但是会在使用时报错
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
  // 正确写法
  const {CleanWebpackPlugin} = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
       // 不可使用
+     new CleanWebpackPlugin(['dist']),
      // 可用
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };