使用CleanWebpackPlugin报错

解决webpack打包多余文件问题

最新推荐文章于 2025-05-11 19:00:34 发布

原创最新推荐文章于 2025-05-11 19:00:34 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文分享了在使用webpack打包项目时遇到的多余文件问题及解决方案。通过更新CleanWebpackPlugin插件的使用方式，实现了构建前自动清理dist文件夹，确保每次打包只包含最新资源。

自己写的项目尝试使用webpack打包，因为开发时配置改动也很频繁，最终打包的dist文件夹中，有一些多余的文件。

在webpack文档中有一个CleanWebpackPlugin插件，可以：

在每次构建前清理 /dist 文件夹。

按文档中的使用方法，首先使用npm安装插件：

npm install clean-webpack-plugin

然后在webpack.config.js中引入使用：

// webpack.config.js
...
const CleanWebpackPlugin = require('clean-webpack-plugin')

...
plugins: [
    ...
    new CleanWebpackPlugin(['dist'])   // dist对应output中输出的文件夹
]

结果实际npm run build时报错了

查看官网介绍才发现，应该是版本问题，使用方法已经改变了，接收的参数应该是一个选项对象，且默认会在构建前删除dist文件夹。只是文档还没更新：

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.

默认情况下，此插件将删除output.path的目录中的所有文件，和每次成功重建后所有没有用到的webpack资源。

按照最新的使用方法修改配置，再build就成功啦～ dist中多余的文件也被自动删除了～

// webpack.config.js
...
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

...
plugins: [
    ...
    new CleanWebpackPlugin()   // 默认对应output中输出的文件夹
]