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 文件夾。現(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)文章
這篇文章主要介紹了JavaScript迭代器的含義及用法,迭代器就是為實(shí)現(xiàn)對(duì)不同集合進(jìn)行統(tǒng)一遍歷操作的一種機(jī)制，只要給需要遍歷的數(shù)據(jù)結(jié)構(gòu)部署Iterator接口，通過(guò)調(diào)用該接口，或者使用消耗該接口的API實(shí)現(xiàn)遍歷操作。,需要的朋友可以參考下2019-06-06
如何實(shí)現(xiàn)一個(gè)webpack模塊解析器
這篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)webpack模塊解析器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了JS原生實(shí)現(xiàn)輪播圖的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
教學(xué)演示-UBB,剪貼板,textRange及其他
教學(xué)演示-UBB,剪貼板,textRange及其他...2006-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)表單驗(yàn)證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
解決js中的setInterval清空定時(shí)器不管用問(wèn)題
這篇文章主要介紹了解決js中的setInterval清空定時(shí)器不管用問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
微信小程序開(kāi)發(fā)之圓形菜單 仿建行圓形菜單實(shí)例
本篇文章主要介紹了微信小程序開(kāi)發(fā)之圓形菜單 仿建行圓形菜單實(shí)例，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文為大家提供一段加入收藏的js代碼以及實(shí)用Jquery更改對(duì)象透明度的代碼，需要的朋友可以參考下2014-01-01