webpack 自動清理 dist 文件夾的兩種實現(xiàn)方法
更新時間：2024年06月21日 14:37:33 作者：代碼搬運媛
這篇文章主要介紹了webpack 自動清理 dist 文件夾的兩種實現(xiàn)方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
我們知道在做 vue 項目時，由于項目不斷擴大，dist 文件越來越復(fù)雜，webpack 生成文件并將其默認放置在 /dist 文件夾中，但是它不會追蹤哪些文件是實際在項目中需要的。
（1）webpack 配置
通常我們會在構(gòu)建前 手動清理 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,
},
};執(zhí)行 npm run build 后檢查 /dist 文件夾。現(xiàn)在只會看到構(gòu)建后生成的文件，而沒有舊文件！
（2）通過插件 clean-webpack-plugin
有時我們也會用到插件來實現(xiàn)同樣的功能。
首先，安裝 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 構(gòu)建時，它都會自動清理 dist 文件夾，確保你只有最新的構(gòu)建產(chǎn)物。
題外話：分享一個性能提升的插件 compression-webpack-plugin
webpack 優(yōu)化插件 compression-webpack-plugin 可以提高打包速度，減少服務(wù)器的傳輸時間。
到此這篇關(guān)于webpack 自動清理 dist 文件夾的兩種實現(xiàn)方法的文章就介紹到這了,更多相關(guān)webpack 自動清理 dist 文件夾內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript迭代器的含義及用法,迭代器就是為實現(xiàn)對不同集合進行統(tǒng)一遍歷操作的一種機制，只要給需要遍歷的數(shù)據(jù)結(jié)構(gòu)部署Iterator接口，通過調(diào)用該接口，或者使用消耗該接口的API實現(xiàn)遍歷操作。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了如何實現(xiàn)一個webpack模塊解析器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了JS原生實現(xiàn)輪播圖的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
教學演示-UBB,剪貼板,textRange及其他...2006-07-07
這篇文章主要為大家詳細介紹了JS實現(xiàn)表單驗證案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實例形式分析了JavaScript針對數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了解決js中的setInterval清空定時器不管用問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了微信小程序開發(fā)之圓形菜單 仿建行圓形菜單實例，具有一定的參考價值，有需要的可以了解一下。2016-12-12
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
本文為大家提供一段加入收藏的js代碼以及實用Jquery更改對象透明度的代碼，需要的朋友可以參考下2014-01-01