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 | const path = require('path'); |
雖然 clean-webpack-plugin 有提供其他參數可以使用,但實際上我們只需要保留預設值就可以了。