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

發表於 2021-02-28 更新於 2021-03-01 分類於 Webpack

Google AD

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

Liker 讚賞

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

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

前言

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

清除

相信你在前面章節如果有瘋狂輸入 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 資料夾，確保舊的檔案都有被刪除之後在生成

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 有提供其他參數可以使用，但實際上我們只需要保留預設值就可以了。

參考文獻

clean-webpack-plugin