脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 自动清理 dist 文件夹

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

 更新时间：2024年06月21日 14:37:33   作者：代码搬运媛  
这篇文章主要介绍了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 可以提高打包速度，减少服务器的传输时间。

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

您可能感兴趣的文章:

相关文章

最新评论