webpack 自动清理 dist 文件夹的两种实现方法

我们知道在做 vue 项目时，由于项目不断扩大，dist 文件越来越复杂，webpack 生成文件并将其默认放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中需要的。

（1）webpack 配置

通常我们会在构建前 手动清理 dist 文件夹，但略显繁杂。其实 webpack 本身包含一个配置，可以自动清空 dist 文件夹。

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

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

执行 npm run build 后检查 /dist 文件夹。现在只会看到构建后生成的文件，而没有旧文件！

（2）通过插件 clean-webpack-plugin

有时我们也会用到插件来实现同样的功能。

首先，安装 clean-webpack-plugin：

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

然后，在你的 webpack.config.js 文件中配置 CleanWebpackPlugin：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  // ... 其他webpack配置
  plugins: [
    new CleanWebpackPlugin(), // 清理 dist 文件夹
    // ... 其他插件
  ],
  // ... 其他配置
};

这样配置后，每次使用 webpack 构建时，它都会自动清理 dist 文件夹，确保你只有最新的构建产物。

题外话：分享一个性能提升的插件 compression-webpack-plugin

webpack 优化插件 compression-webpack-plugin 可以提高打包速度，减少服务器的传输时间。