CleanWebpackPlugin最新版本使用問題

如果在webpack 安裝　CleanWebpackPlugin最新版本報錯

如果是報下面的錯誤的話

 

 然后在控制台向上翻

會發現　　TypeError: CleanWebpackPlugin is not a constructor 錯誤❌

如圖

 

 ========= 解決辦法 ===========

清理 /dist 文件夾

你可能已經注意到，由於過去的指南和代碼示例遺留下來，導致我們的 /dist 文件夾相當雜亂。webpack 會生成文件，然后將這些文件放置在 /dist 文件夾中，但是 webpack 無法追蹤到哪些文件是實際在項目中用到的。

通常，在每次構建前清理 /dist 文件夾，是比較推薦的做法，因此只會生成用到的文件。

安裝： npm install clean-webpack-plugin --save-dev

老版本CleanWebpackPlugin的用法　　

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

現在執行 npm run build，再檢查 /dist 文件夾。如果一切順利，你現在應該不會再看到舊的文件，只有構建后生成的文件！

如果一切沒這么順利，比如報錯：CleanWebpackPlugin is not a constructor

 

新版本用法

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

 

參考：https://www.jianshu.com/p/ed14e6ed7ad9