本文介绍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自动清理打包目录内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!