JAVA高级面试进阶训练营视频教程

admin

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