Webpack自动清理打包目录的实现
作者:望舒时间:2026-10-26 09:02:25浏览:372
本文介绍Webpack打包时自动清理输出目录的两种方案:通过npm scripts在打包前执行删除命令,以及使用clean-webpack-plugin插件进行配置。
Webpack在打包时,会在指定的输出文件夹中生成文件,但不会自动清理之前的打包残留。每次手动删除较为繁琐,因此需要实现自动清理功能。常见的自动清理方式有以下两种:
1. 通过 npm scripts 清理构建目录;
rm-rf./dist && webpack也可以使用以下命令:
rimraf./dist && webpack上述命令在执行打包前,先删除打包输出目录dist,然后再执行打包操作。

2. 使用 clean-webpack-plugin 插件清理;
1. 安装插件;
npm i clean-webpack-plugin -D2. 配置Webpack文件;
const path = require('path');
// 引入插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js',
path: path.join(__dirname, 'dist'),
},
plugins: [
// 配置插件
new CleanWebpackPlugin()
]
};到此这篇关于Webpack自动清理打包目录的实现的文章就介绍到这了,更多相关Webpack自动清理打包目录内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
作者最新文章
Docker 部署 Wiki.js 完整教程:从安装到初始化配置
2026-11-04 10:36:31
从其他平台迁移数据到 Wiki.js 的方法与注意事项
2026-11-03 23:50:05
Wiki.js 启动报错或数据库连接失败怎么排查解决
2026-11-03 09:49:52
macOS 使用 Homebrew 或 nvm 升级 Node.js 的最佳实践
2026-11-03 08:29:29
前端项目部署后如何提示用户版本更新详解
2026-11-01 02:17:48
