javascript 类型错误：CleanwebpackPlugin 不是构造函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56567930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: CleanwebpackPlugin is not a constructor
提问by ECallpani
i'm trying to preview a vue web application through webpack-server-dev.I'm following this guide https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34
我正在尝试通过 webpack-server-dev 预览 vue Web 应用程序。我正在遵循本指南 https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project -22f7c552fb34
The guide explains that the plugin is used to delete old and unused files in the dist directory. I have already tried replacing const CleanWebpackPlugin = require('clean-webpack-plugin')with const { CleanWebpackPlugin } = require('clean-webpack-plugin')which some posts suggest. i have also tried looking at the documentation on https://github.com/johnagan/clean-webpack-pluginbut without succes as i am pretty new to this.
该指南解释了该插件用于删除 dist 目录中的旧文件和未使用文件。我已经尝试更换const CleanWebpackPlugin = require('clean-webpack-plugin')与const { CleanWebpackPlugin } = require('clean-webpack-plugin')其中一些帖子建议。我还尝试查看https://github.com/johnagan/clean-webpack-plugin上的文档，但没有成功，因为我对此很陌生。
when i try to npm run devi get this error
当我尝试时出现npm run dev此错误
new CleanWebpackPlugin(['dist']),
^
TypeError: CleanWebpackPlugin is not a constructor
at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
at Array.forEach (<anonymous>)
at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787: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 Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
and this is the webpack.config.js file
这是 webpack.config.js 文件
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = (env, argv) => ({
mode: argv && argv.mode || 'development',
devtool: (argv && argv.mode || 'development') === 'production' ? 'source-map' : 'eval',
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
node: false,
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
exclude: /\.module\.css$/
}
]
},
resolve: {
extensions: [
'.js',
'.vue',
'.json'
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src')
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'static', 'index.html'),
inject: true
}),
new CopyWebpackPlugin([{
from: path.resolve(__dirname, 'static'),
to: path.resolve(__dirname, 'dist'),
toType: 'dir'
}])
],
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
runtimeChunk: {
name: entrypoint => `runtime~${entrypoint.name}`
},
mangleWasmImports: true,
removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true
},
devServer: {
compress: true,
host: 'localhost',
https: true,
open: true,
overlay: true,
port: 9000
}
});
this is the error i get when using the right import as explained in the documenation :
这是我在使用文档中解释的正确导入时遇到的错误：
throw new Error(`clean-webpack-plugin only accepts an options object. See:
^
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\Eson\Desktop\pwa-vue-app-1\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13)
at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
at Array.forEach (<anonymous>)
at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787: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 Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
if i delete line 56 in webpack.config.js i can run the web application without problems, but i want to understand the source of this issue
如果我删除 webpack.config.js 中的第 56 行，我可以毫无问题地运行 Web 应用程序，但我想了解这个问题的根源
回答by rpmansion
The correct one is to use this import:
正确的是使用这个导入：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');`
And then instead of passing an array with the distribution folder, change it to
然后不是通过分发文件夹传递数组，而是将其更改为
plugins: [
new CleanWebpackPlugin(),
//...
]
回答by Chester
I had the same problem, and I solved it in the following way：
我遇到了同样的问题，我通过以下方式解决了它：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist']
})
]回答by Tom Maton
With the update you'll need to do the following to include it
通过更新，您需要执行以下操作以包含它
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
Then in the array of plugins replace add the following
然后在插件数组中替换添加以下内容
plugins: [
new CleanWebpackPlugin(['dist]),
]
with
和
plugins: [
new CleanWebpackPlugin(),
]
As the with the update there is no need to pass any parameters as it will remove all files inside webpack's output.pathdirectory, as well as all unused webpack assets after every successful rebuild.
与更新一样，不需要传递任何参数，因为它会output.path在每次成功重建后删除 webpack目录中的所有文件，以及所有未使用的 webpack 资产。
回答by Carles Alcolea
I had the same issue today, right now. As you can tell, there was a mismatch between the docs and the actual code. And in fact, you can see in the last commit they mergedboth to the documentation:
我今天遇到了同样的问题，现在。如您所知，文档和实际代码之间存在不匹配。事实上，您可以在上次提交中看到他们将两者合并到文档中：
and also to the code:
还有代码：
So I just switched from const CleanWebpackPlugin = require('clean-webpack-plugin')to
所以我只是从 切换const CleanWebpackPlugin = require('clean-webpack-plugin')到
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
and it works fine.
它工作正常。
I think you may have been caught in between things. Reinstall the npm package and try again, it should work.
我想你可能被夹在中间。重新安装 npm 包并重试，它应该可以工作。
I wrote a bit of what you can see in their public repository because very often when sudden changes like this happen, you'll find your own answer in the repo, probably in the last commits. And it's good reading a bit of the code you use, especially if it helps you troubleshoot your issue :)
我写了一些您可以在他们的公共存储库中看到的内容，因为经常发生这样的突然更改时，您会在 repo 中找到自己的答案，可能是在最后一次提交中。阅读您使用的一些代码会很好，特别是如果它可以帮助您解决问题:)
回答by Ed Jones
For those finding this error with the recent updates to nativescript-vue, I fixed it by changing webpack.config.js(top level file in app folder). As above, it now reflects the syntax in the CleanWebpackPlugin docs.
对于那些在最近更新nativescript-vue 时发现此错误的人，我通过更改webpack.config.js（应用程序文件夹中的顶级文件）来修复它。如上所述，它现在反映了 CleanWebpackPlugin docs 中的语法。
//const CleanWebpackPlugin = require("clean-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
and
和
//new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
new CleanWebpackPlugin(),
回答by Amir Ali
I am not very much familiar with webpack and currently learning it
我对 webpack 不是很熟悉，目前正在学习
although this thing below helped me fix the issue
虽然下面的这个东西帮助我解决了这个问题
I just uninstall clean-webpack-plugin and then reinstall as dependency before this i've intalled as a dev-dependency
我只是卸载 clean-webpack-plugin 然后重新安装为依赖项，然后我将其安装为开发依赖项
after uninstall and installing it like that : npm install --save clean-webpack-plugin
卸载并像这样安装后： npm install --save clean-webpack-plugin
and by adding this
并通过添加这个
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
solved my issue!!
解决了我的问题！！
hope it helps
希望能帮助到你
回答by ashui
CleanWebpackPlugin v3.0.0
CleanWebpackPlugin v3.0.0
Replaced default export with named export CleanWebpackPlugin
将默认导出替换为命名导出 CleanWebpackPlugin
[https://github.com/johnagan/clean-webpack-plugin/releases/tag/v3.0.0]
[ https://github.com/johnagan/clean-webpack-plugin/releases/tag/v3.0.0]
correct code is:
正确的代码是：
// es modules
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
// common js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
回答by Neablis
Looks like docs are broken, correct code is
看起来文档坏了，正确的代码是
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
