webpack中clean-webpack-plugin插件使用遇到的问题及解决方法

webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。

clean-webpack-plugin 是一个比较普及的管理插件，安装方法如下：

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

然后在webpack.config.js文件中配置一下，方法如下：

   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')
     }
   };

于是问题出现了，根据webpack中文文档指南这样配置会报错

 TypeError: CleanWebpackPlugin is not a constructor
     at Object.<anonymous> (C:\Users\13283\webpack-demo\webpack.config.js:10:9)
     at Module._compile (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
     at Module.load (internal/modules/cjs/loader.js:653:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
     at Module.require (internal/modules/cjs/loader.js:692:17)
     at require (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
     at WEBPACK_OPTIONS (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
     at requireConfig (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
     at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
     at Array.forEach (<anonymous>)
     at module.exports (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
     at yargs.parse (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:71:45)
     at Object.parse (C:\Users\13283\webpack-demo\node_modules\yargs\yargs.js:567:18)
     at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8
     at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:365:3)
     at Module._compile (internal/modules/cjs/loader.js:778:30)
     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
     at Module.load (internal/modules/cjs/loader.js:653:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
     at Module.require (internal/modules/cjs/loader.js:692:17)
     at require (internal/modules/cjs/helpers.js:25:18)
     at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack\bin\webpack.js:156:2)
     at Module._compile (internal/modules/cjs/loader.js:778:30)
     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
     at Module.load (internal/modules/cjs/loader.js:653:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
 npm ERR! code ELIFECYCLE
 npm ERR! errno 1
 npm ERR! webpack-demo@1.0.0 build: `webpack`
 npm ERR! Exit status 1
 npm ERR!
 npm ERR! Failed at the webpack-demo@1.0.0 build script.
 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 npm ERR! A complete log of this run can be found in:
 npm ERR!     C:\Users\13283\AppData\Roaming\npm-cache\_logs\2019-09-15T13_28_20_068Z-debug.log
 PS C:\Users\13283\webpack-demo>

根据报错信息，查得是因为新版本写法改变了，配置文件应该这样导入：

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

但是发现还是有错误

 Error: clean-webpack-plugin only accepts an options object. See:
             https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional
     at new CleanWebpackPlugin (C:\Users\13283\webpack-demo\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13)
     at Object.<anonymous> (C:\Users\13283\webpack-demo\webpack.config.js:10:9)
     at Module._compile (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
     at Module.load (internal/modules/cjs/loader.js:653:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
     at Module.require (internal/modules/cjs/loader.js:692:17)
     at require (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
     at WEBPACK_OPTIONS (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
     at requireConfig (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
     at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
     at Array.forEach (<anonymous>)
     at module.exports (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
     at yargs.parse (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:71:45)
     at Object.parse (C:\Users\13283\webpack-demo\node_modules\yargs\yargs.js:567:18)
     at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8
     at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:365:3)
     at Module._compile (internal/modules/cjs/loader.js:778:30)
     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
     at Module.load (internal/modules/cjs/loader.js:653:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
     at Module.require (internal/modules/cjs/loader.js:692:17)
     at require (internal/modules/cjs/helpers.js:25:18)
     at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack\bin\webpack.js:156:2)
     at Module._compile (internal/modules/cjs/loader.js:778:30)
     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
     at Module.load (internal/modules/cjs/loader.js:653:32)
     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
 npm ERR! code ELIFECYCLE
 npm ERR! errno 1
 npm ERR! webpack-demo@1.0.0 build: `webpack`
 npm ERR! Exit status 1
 npm ERR!
 npm ERR! Failed at the webpack-demo@1.0.0 build script.
 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 npm ERR! A complete log of this run can be found in:
 npm ERR!     C:\Users\13283\AppData\Roaming\npm-cache\_logs\2019-09-15T13_41_34_017Z-debug.log
 PS C:\Users\13283\webpack-demo>

再次求解，得解决方法为不传递参数即可

new CleanWebpackPlugin()

然后，问题就解决了，看来知识还是得学习最新的呀！不然可能遇到奇怪的问题！

参考博客：

https://www.cnblogs.com/steamed-twisted-roll/p/10990309.html

https://blog.csdn.net/qq_23521659/article/details/88353708