webpack | 插件 clean-webpack-plugin

我们使用哈希来保证缓存的同时会发现每次 build 都会生成不一样的文件，这时候我们引入一个插件来帮助我们删除不需要的文件。

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

然后修改配置文件

• 官方文档

之前的用法

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

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

现在的用法

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
const webpackConfig = {
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under <PROJECT_DIR>/dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};
 
module.exports = webpackConfig;