EP 8 - 關於 Webpack 學習這件小事之清除文件

發表於 2019-06-07 分類於 Webpack

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

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

前言

相信經過前面反反覆覆的測試一定會覺得有時候打包 webpack -p 超麻煩，必須要手動將 dist 資料夾刪除才能再產生新的，所以這邊就來記錄一下該如何加入刪除文件的插件

首先一樣我們必須安裝插件

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

設置方式依照官方 npm 說明看起來是滿簡單的，所以我們就來試著調整看看吧

1	const CleanWebpackPlugin = require('clean-webpack-plugin');

CleanWebpackPlugin

然後在插件的地方加入這一段

1	new CleanWebpackPlugin(pathClean),

CleanWebpackPlugin

這邊補充一個雷點，有可能你在這時候執行 Web Server 會出現錯誤 TypeError: CleanWebpackPlugin is not a constructor，這個問題只需要你這樣修改就可以了

1	const { CleanWebpackPlugin } = require('clean-webpack-plugin');

那這樣就可以每次執行 webpack 的時候刪除 dist 資料夾，確保環境最新哩~

那為什麼要做文件清除呢?首先讓我們試著調整一下 webpack.config.js

JavaScript

然後先生成第一次，我們會得到這樣的結果

JavaScript

接下來修改一下 JavaScript 內容再生成一次，我們會發現檔案就多了一個

JavaScript

所以建議一定要搭配文件清除唷~

下一章節來講講打包圖片吧!