EP 8 - 關於 Webpack 學習這件小事之清除文件
前言
相信經過前面反反覆覆的測試一定會覺得有時候打包 webpack -p 超麻煩,必須要手動將 dist 資料夾刪除才能再產生新的,所以這邊就來記錄一下該如何加入刪除文件的插件
起手式
首先一樣我們必須安裝插件
1 | npm install --save-dev clean-webpack-plugin |
設置 webpack.config.js
設置方式依照官方 npm 說明看起來是滿簡單的,所以我們就來試著調整看看吧
1 | const CleanWebpackPlugin = require('clean-webpack-plugin'); |
然後在插件的地方加入這一段
1 | new CleanWebpackPlugin(pathClean), |
這邊補充一個雷點,有可能你在這時候執行 Web Server 會出現錯誤 TypeError: CleanWebpackPlugin is not a constructor
,這個問題只需要你這樣修改就可以了
1 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); |
那這樣就可以每次執行 webpack 的時候刪除 dist 資料夾,確保環境最新哩~
結尾
那為什麼要做文件清除呢?首先讓我們試著調整一下 webpack.config.js
然後先生成第一次,我們會得到這樣的結果
接下來修改一下 JavaScript 內容再生成一次,我們會發現檔案就多了一個
所以建議一定要搭配文件清除唷~
下一章節來講講打包圖片吧!