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 資料夾，確保舊的檔案都有被刪除之後在生成

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

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

前言

清除

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

清除

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

Webpack 5 走起! - Vue(10) - vue-loader

Webpack 5 走起! - Loaders(9) - Sass/SCSS

Webpack 5 走起! - Asset Modules(8) - asset/source

Webpack 5 走起! - Asset Modules(7) - asset/inline

分享這篇文章

留言