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

在 Vue 项目开发过程中，随着项目规模的增长，dist 目录下的文件结构往往变得日益复杂。Webpack 在构建时会将生成的资源默认输出到 /dist 文件夹，但默认情况下它并不会自动识别并移除那些不再被项目引用的旧文件。

使用 webpack 内置配置

（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 文件夹，你会发现其中仅包含本次构建生成的最新文件，之前残留的旧文件已被自动清除。

使用 clean-webpack-plugin 插件

（2）使用 clean-webpack-plugin 插件

除了内置配置，我们也可以借助第三方插件来实现相同的功能，这通常适用于需要更精细控制清理行为的场景。

首先，需要通过 npm 安装 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 插件能够生成预压缩文件，有助于提升打包效率并减少服务器传输时间。

到此这篇关于webpack 自动清理 dist 文件夹的两种实现方法的文章就介绍到这了,更多相关webpack 自动清理 dist 文件夹内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！