webpack 自動(dòng)清理 dist 文件夾的兩種實(shí)現(xiàn)方法
我們知道在做 vue 項(xiàng)目時(shí)，由于項(xiàng)目不斷擴(kuò)大，dist 文件越來(lái)越復(fù)雜，webpack 生成文件并將其默認(rèn)放置在 /dist 文件夾中，但是它不會(huì)追蹤哪些文件是實(shí)際在項(xiàng)目中需要的。
（1）webpack 配置
通常我們會(huì)在構(gòu)建前 手動(dòng)清理 dist 文件夾，但略顯繁雜。其實(shí) webpack 本身包含一個(gè)配置，可以自動(dòng)清空 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 文件夾?，F(xiàn)在只會(huì)看到構(gòu)建后生成的文件，而沒(méi)有舊文件！
（2）通過(guò)插件 clean-webpack-plugin
有時(shí)我們也會(huì)用到插件來(lái)實(shí)現(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)建時(shí)，它都會(huì)自動(dòng)清理 dist 文件夾，確保你只有最新的構(gòu)建產(chǎn)物。
題外話：分享一個(gè)性能提升的插件 compression-webpack-plugin
webpack 優(yōu)化插件 compression-webpack-plugin 可以提高打包速度，減少服務(wù)器的傳輸時(shí)間。
到此這篇關(guān)于webpack 自動(dòng)清理 dist 文件夾的兩種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)webpack 自動(dòng)清理 dist 文件夾內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
線路分流自動(dòng)智能跳轉(zhuǎn)代碼,自動(dòng)選擇最快鏡像網(wǎng)站(js)
線路分流自動(dòng)智能跳轉(zhuǎn)代碼,自動(dòng)選擇最快鏡像網(wǎng)站,自動(dòng)選擇電信或網(wǎng)通線路跳轉(zhuǎn)代碼2011-10-10
rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁(yè)面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信還搗鼓出新的rpx單位？下面通過(guò)這篇文章來(lái)一起看看吧。2016-12-12
這篇文章主要介紹了js控制table合并的具體實(shí)現(xiàn),需要的朋友可以參考下2014-02-02
微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
這篇文章介紹了js控制表單奇偶行樣式的簡(jiǎn)單方法，有需呀偶的朋友可以參考一下2013-07-07
iframe自適應(yīng)寬度、高度 ie6 7 8，firefox 3.86下測(cè)試通過(guò)
近期需要一個(gè)iframe自適應(yīng)高度的東西，在網(wǎng)上找了很多，都不能用……一看大體的日期都是大概 2008年前后的其他近期的基本都是以前的轉(zhuǎn)載，所以只好自己動(dòng)手了。2010-07-07
arcgis for js 修改infowindow樣式的方法
下面小編就為大家?guī)?lái)一篇arcgis for js 修改infowindow樣式的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了用svg制作富有動(dòng)態(tài)的tooltip的代碼以及制作過(guò)程，十分的細(xì)致全面，有需要的小伙伴可以參考下。2015-07-07
BootStrap實(shí)現(xiàn)樹形目錄組件代碼詳解
這篇文章主要介紹了BootStrap實(shí)現(xiàn)樹形目錄組件代碼詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
生成器函數(shù)在JavaScript中是一種可以自定義迭代器行為的強(qiáng)大特性,它允許暫停函數(shù)的執(zhí)行,保持函數(shù)內(nèi)部狀態(tài),以便在必要時(shí)候可以恢復(fù)執(zhí)行,下面我們就來(lái)看看它有什么妙用吧2023-12-12