clean-webpack-plugin源码学习，TypeError: CleanWebpackPlugin is not a constructor
2019-05-31 15:55
1906 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JsongNeu/article/details/90717675
clean-webpack-plugin源码学习，TypeError: CleanWebpackPlugin is not a constructor
- "clean-webpack-plugin": "^3.0.0"
- "clean-webpack-plugin": "^2.0.2",
- "clean-webpack-plugin": "^1.0.1"
- 问题解决啦
本文是在学习webpack时，做一个小的项目，使用clean-webpack-plugin插件清空目标文件夹时出现的一些问题的总结
npm install clean-webpack-plugin -D
“clean-webpack-plugin”: “^3.0.0”
-
npm 安装的时候，默认安装的最新版本
-
webpack.config.js
const path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// entry: './src/index.js',
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist')
},
plugins: [
// "clean-webpack-plugin": "^2.0.2",
// new CleanWebpackPlugin(),
// 1.0.1
// new CleanWebpackPlugin(['dist']),
new CleanWebpackPlugin(['dist']),
// 在dist文件夹中 自动新建index.html 并且所有的bundle会自动添加到index.html中
new HtmlWebpackPlugin({
title: 'output management'
})
]
};
- 出现了这个问题 TypeError: CleanWebpackPlugin is not a constructor
PS E:\Practice\jslearn> npm run build > jslearn@1.0.0 build E:\Practice\jslearn > webpack E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:74 throw err; ^ TypeError: CleanWebpackPlugin is not a constructor at Object.<anonymous> (E:\Practice\jslearn\webpack.config.js:20:5) at Module._compile (E:\Practice\jslearn\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (E:\Practice\jslearn\node_modules\v8-compile-cache\v8-compile-cache.js:161:20) at WEBPACK_OPTIONS (E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:115:13) at requireConfig (E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:117:6) at E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:124:17 at Array.forEach (<anonymous>) at module.exports (E:\Practice\jslearn\node_modules\webpack-cli\bin\utils\convert-argv.js:122:15) at yargs.parse (E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:71:45) at Object.parse (E:\Practice\jslearn\node_modules\yargs\yargs.js:567:18) at E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:49:8 at Object.<anonymous> (E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:375:3) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (E:\Practice\jslearn\node_modules\webpack\bin\webpack.js:156:2) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! jslearn@1.0.0 build: `webpack` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the jslearn@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\Administrator\AppData\Roaming\npm-cache\_logs\2019-05-31T07_17_10_542Z-debug.log
- 查看clean-webpack-plugin源码
导出的是 export { CleanWebpackPlugin }
源码
declare class CleanWebpackPlugin {
private readonly dry;
private readonly verbose;
private readonly cleanStaleWebpackAssets;
private readonly protectWebpackAssets;
private readonly cleanAfterEveryBuildPatterns;
private readonly cleanOnceBeforeBuildPatterns;
private readonly dangerouslyAllowCleanPatternsOutsideProject;
private currentAssets;
private initialClean;
private outputPath;
constructor(options?: Options);apply(compiler: Compiler): void;
/**
* Initially remove files from output directory prior to build.
*
* Only happens once.
*
* Warning: It is recommended to initially clean your build directory outside of webpack to minimize unexpected behavior.
*/
handleInitial(compilation: Compilation): void;
handleDone(stats: Stats): void;
removeFiles(patterns: string[]): void;
}
export { CleanWebpackPlugin };
- 所以正确的引用应该是这样
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
- 继续打包
- 出现新问题
E:\Practice\jslearn\node_modules\webpack-cli\bin\cli.js:74 throw err; ^ Error: clean-webpack-plugin only accepts an options object. See:
查看源码 CleanWebpackPlugin 的构造器 需要是一个可以省略的 Options对象，所以我们就不写参数了
constructor(options?: Options);
plugins: [
// "clean-webpack-plugin": "^2.0.2",
// new CleanWebpackPlugin(),
// 1.0.1
// new CleanWebpackPlugin(['dist']),
new CleanWebpackPlugin(),
// 在dist文件夹中 自动新建index.html 并且所有的bundle会自动添加到index.html中
new HtmlWebpackPlugin({
title: 'output management'
})
- 最后的webpack.config.js
const path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
module.exports = {
// entry: './src/index.js',
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist')
},
plugins: [
// "clean-webpack-plugin": "^2.0.2",
// new CleanWebpackPlugin(),
// 1.0.1
// new CleanWebpackPlugin(['dist']),
new CleanWebpackPlugin(),
// 在dist文件夹中 自动新建index.html 并且所有的bundle会自动添加到index.html中
new HtmlWebpackPlugin({
title: 'output management'
})]
};
打包成功
“clean-webpack-plugin”: “^2.0.2”,
我们再来看看2版本的CleanWebpackPlugin
npm install clean-webpack-plugin@2 -D
源码
export default CleanWebpackPlugin;
基本差不多，导出的时候和3版本还是有点区别的，默认导出了一个CleanWebpackPlugin
所以我们在引用的时候需要改一下,直接require就行了
CleanWebpackPlugin = require('clean-webpack-plugin')
完整的webpack.config.js
const path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// entry: './src/index.js',
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist')
},
plugins: [
// "clean-webpack-plugin": "^2.0.2",
// new CleanWebpackPlugin(),
// 1.0.1
// new CleanWebpackPlugin(['dist']),
new CleanWebpackPlugin(),
// 在dist文件夹中 自动新建index.html 并且所有的bundle会自动添加到index.html中
new HtmlWebpackPlugin({
title: 'output management'
})]
};
“clean-webpack-plugin”: “^1.0.1”
再来看看1版本的CleanWebpackPlugin
这个源码差别就很大了，是js写的，2和3版本都是ts
部分源码
function CleanWebpackPlugin(paths, options) {
//backwards compatibility
if (typeof options === 'string') {
options = {
root: options
}
}
options = options || {};
if (options.verbose === undefined) {
if (process.env.NODE_ENV === 'test') {
options.verbose = false;
} else {
options.verbose = true;
}
}
options.allowExternal = options.allowExternal || false;
if (options.dry === undefined) {
options.dry = false;
}
// determine webpack root
options.root = options.root || path.dirname(module.parent.filename);
// allows for a single string entry
if (typeof paths == 'string' || paths instanceof String) {
paths = [paths];
}
// store paths and options
this.paths = paths;
this.options = options;
}
module.exports = CleanWebpackPlugin;
可以看到，这个CleanWebpackPlugin构造器需要两个参数paths和option，需要指定清空文件的路径
plugins: [
// "clean-webpack-plugin": "^2.0.2",
// new CleanWebpackPlugin(),
// 1.0.1
new CleanWebpackPlugin(['dist']),
// new CleanWebpackPlugin(),
// 在dist文件夹中 自动新建index.html 并且所有的bundle会自动添加到index.html中
new HtmlWebpackPlugin({
title: 'output management'
})
]
完成的webpack.config.js
const path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// entry: './src/index.js',
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist')
},
plugins: [
// "clean-webpack-plugin": "^2.0.2",
// new CleanWebpackPlugin(),
// 1.0.1
new CleanWebpackPlugin(['dist']),
// new CleanWebpackPlugin(),
// 在dist文件夹中 自动新建index.html 并且所有的bundle会自动添加到index.html中
new HtmlWebpackPlugin({
title: 'output management'
})
]};
问题解决啦
所以官网上的教程clean-webpack-plugin的版本应该
“clean-webpack-plugin”: “^1.0.1”
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue踩坑--TypeError: __WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor
- Webpack.optimize.OccurenceOrderPlugin is not a constructor
- Uncaught (in promise) TypeError: __webpack_require__.i(...) is not a function
- html-webpack-plugin2.22.0、Webpack与gulp结合时出现ReferenceError: window is not defined错误的解决办法
- Uncaught TypeError: __webpack_require__.i(...) is not a function
- webpack webpack-core LoadersList TypeError: r.forEach is not a function
- 错误中学习--TypeError: Ext.panel is not a constructor
- ionic3 ionic serve build fail Error: webpackJsonP is not defined
- Error: clean-webpack-plugin only accepts an options object.
- 1. Django学习疑问 ---- 在进入admin的时候出现TypeError at /admin/ 'set' object is not reversible错误
- 关于ExtJs使用时报错：TypeError: b[e] is not a constructor
- Ionic 2: ReferenceError: webpackJsonp is not defined
- TypeError: 'WebElement' object is not iterable
- Extjs TypeError: types[(intermediate value)] is not a constructor
- webpack4+学习笔记：4. html-webpack-plugin 插件 与 clean-webpack-plugin 插件
- Uncaught TypeError: window.jsObj.closeWebView is not a function
- Uncaught TypeError: *** is not a constructor
- Extjs 很恶心的错误，无法找原因，只有：TypeError: A[(intermediate value)] is not a constructor
- 微软必应地图加载错误：Uncaught TypeError: Microsoft.Maps.Location is not a constructor
- 海康web视频插件错误：TypeError: c.HWP_GetLocalConfig is not a function