Webpack自动清理打包目录的实现

作者:望舒

时间:2026-10-26

浏览:371

本文介绍Webpack打包时自动清理输出目录的两种方案:通过npm scripts在打包前执行删除命令,以及使用clean-webpack-plugin插件进行配置。

文章目录

Webpack在打包时,会在指定的输出文件夹中生成文件,但不会自动清理之前的打包残留。每次手动删除较为繁琐,因此需要实现自动清理功能。常见的自动清理方式有以下两种:

1. 通过 npm scripts 清理构建目录;

rm-rf./dist && webpack

也可以使用以下命令:

rimraf./dist && webpack

上述命令在执行打包前,先删除打包输出目录dist,然后再执行打包操作。

1. 通过 npm scripts 清理构建目录;

2. 使用 clean-webpack-plugin 插件清理;

1. 安装插件;

npm i clean-webpack-plugin -D

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章