我们知道在做 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 可以提高打包速度，减少服务器的传输时间。