Webpack 5 走起! - plugins(4) - clean-webpack-plugin

前言

接下來這一篇將會介紹另一個插件,是關於清除檔案的插件。

清除

相信你在前面章節如果有瘋狂輸入 npm run dev 或者是 npm run build 等指令時,應該會發現 dist 會一直生成不同的檔案,主要原因是 hash 不同所導致,但是往往我們在生成檔案時,都會希望清除原有的舊檔案,那麼就會使用到一個叫做 clean-webpack-plugin 的插件,因此先讓我們替專案安裝插件

1
npm install --save-dev clean-webpack-plugin

而這邊做法也是一樣,直接在 webpack.config.js 的 plugins 屬性新增 new CleanWebpackPlugin() 就可以了。

不要懷疑,清除套件就是這麼簡單,當你每次執行 npm run dev 或者是 npm run build,webpack 就會先幫你刪除 dist 資料夾在重新生成一個 dist 資料夾,確保舊的檔案都有被刪除之後在生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[contenthash:6].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack 5',
template: path.resolve(__dirname, './src/template/index.html'),
filename: 'index.[contenthash:6].html',
inject: 'body',
}),
new CleanWebpackPlugin(),
]
};

雖然 clean-webpack-plugin 有提供其他參數可以使用,但實際上我們只需要保留預設值就可以了。

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ