webpack中clean-webpack-plugin插件使用遇到的问题及解决方法
webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。
clean-webpack-plugin 是一个比较普及的管理插件，安装方法如下：
npm install clean-webpack-plugin --save-dev
然后在webpack.config.js文件中配置一下，方法如下：
1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 + const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 5 module.exports = { 6 entry: { 7 app: './src/index.js', 8 print: './src/print.js' 9 }, 10 plugins: [ 11 + new CleanWebpackPlugin(['dist']), 12 new HtmlWebpackPlugin({ 13 title: 'Output Management' 14 }) 15 ], 16 output: { 17 filename: '[name].bundle.js', 18 path: path.resolve(__dirname, 'dist') 19 } 20 };
于是问题出现了，根据webpack中文文档指南这样配置会报错
1 TypeError: CleanWebpackPlugin is not a constructor 2 at Object.<anonymous> (C:\Users\13283\webpack-demo\webpack.config.js:10:9) 3 at Module._compile (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) 4 at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 5 at Module.load (internal/modules/cjs/loader.js:653:32) 6 at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 7 at Function.Module._load (internal/modules/cjs/loader.js:585:3) 8 at Module.require (internal/modules/cjs/loader.js:692:17) 9 at require (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:161:20) 10 at WEBPACK_OPTIONS (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13) 11 at requireConfig (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6) 12 at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17 13 at Array.forEach (<anonymous>) 14 at module.exports (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15) 15 at yargs.parse (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:71:45) 16 at Object.parse (C:\Users\13283\webpack-demo\node_modules\yargs\yargs.js:567:18) 17 at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8 18 at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:365:3) 19 at Module._compile (internal/modules/cjs/loader.js:778:30) 20 at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 21 at Module.load (internal/modules/cjs/loader.js:653:32) 22 at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 23 at Function.Module._load (internal/modules/cjs/loader.js:585:3) 24 at Module.require (internal/modules/cjs/loader.js:692:17) 25 at require (internal/modules/cjs/helpers.js:25:18) 26 at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack\bin\webpack.js:156:2) 27 at Module._compile (internal/modules/cjs/loader.js:778:30) 28 at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 29 at Module.load (internal/modules/cjs/loader.js:653:32) 30 at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 31 at Function.Module._load (internal/modules/cjs/loader.js:585:3) 32 npm ERR! code ELIFECYCLE 33 npm ERR! errno 1 34 npm ERR! webpack-demo@1.0.0 build: `webpack` 35 npm ERR! Exit status 1 36 npm ERR! 37 npm ERR! Failed at the webpack-demo@1.0.0 build script. 38 npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 39 40 npm ERR! A complete log of this run can be found in: 41 npm ERR! C:\Users\13283\AppData\Roaming\npm-cache\_logs\2019-09-15T13_28_20_068Z-debug.log 42 PS C:\Users\13283\webpack-demo>
根据报错信息，查得是因为新版本写法改变了，配置文件应该这样导入：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
但是发现还是有错误
1 Error: clean-webpack-plugin only accepts an options object. See: 2 https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional 3 at new CleanWebpackPlugin (C:\Users\13283\webpack-demo\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13) 4 at Object.<anonymous> (C:\Users\13283\webpack-demo\webpack.config.js:10:9) 5 at Module._compile (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) 6 at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 7 at Module.load (internal/modules/cjs/loader.js:653:32) 8 at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 9 at Function.Module._load (internal/modules/cjs/loader.js:585:3) 10 at Module.require (internal/modules/cjs/loader.js:692:17) 11 at require (C:\Users\13283\webpack-demo\node_modules\v8-compile-cache\v8-compile-cache.js:161:20) 12 at WEBPACK_OPTIONS (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13) 13 at requireConfig (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6) 14 at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17 15 at Array.forEach (<anonymous>) 16 at module.exports (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15) 17 at yargs.parse (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:71:45) 18 at Object.parse (C:\Users\13283\webpack-demo\node_modules\yargs\yargs.js:567:18) 19 at C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:49:8 20 at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack-cli\bin\cli.js:365:3) 21 at Module._compile (internal/modules/cjs/loader.js:778:30) 22 at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 23 at Module.load (internal/modules/cjs/loader.js:653:32) 24 at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 25 at Function.Module._load (internal/modules/cjs/loader.js:585:3) 26 at Module.require (internal/modules/cjs/loader.js:692:17) 27 at require (internal/modules/cjs/helpers.js:25:18) 28 at Object.<anonymous> (C:\Users\13283\webpack-demo\node_modules\webpack\bin\webpack.js:156:2) 29 at Module._compile (internal/modules/cjs/loader.js:778:30) 30 at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) 31 at Module.load (internal/modules/cjs/loader.js:653:32) 32 at tryModuleLoad (internal/modules/cjs/loader.js:593:12) 33 npm ERR! code ELIFECYCLE 34 npm ERR! errno 1 35 npm ERR! webpack-demo@1.0.0 build: `webpack` 36 npm ERR! Exit status 1 37 npm ERR! 38 npm ERR! Failed at the webpack-demo@1.0.0 build script. 39 npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 40 41 npm ERR! A complete log of this run can be found in: 42 npm ERR! C:\Users\13283\AppData\Roaming\npm-cache\_logs\2019-09-15T13_41_34_017Z-debug.log 43 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
版权声明：本文为duoge原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。