TypeError: CleanwebpackPlugin 不是构造函数

我试图通过 webpack-server-dev 预览一个 vue web 应用程序 Https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

该指南解释说，该插件用于删除 dist 目录中的旧文件和未使用的文件。我已经尝试用 const { CleanWebpackPlugin } = require('clean-webpack-plugin')代替 const CleanWebpackPlugin = require('clean-webpack-plugin')，一些文章建议。我也试过看看关于 https://github.com/johnagan/clean-webpack-plugin的文档，但没有成功，因为我是相当新的。

当我尝试 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)

这是 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
}
});

这是我在使用文档中解释的正确导入时得到的错误:

      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)

如果我删除 webpack.config.js 中的第56行，我可以毫无问题地运行 web 应用程序，但是我想了解这个问题的根源

51910 次浏览
小开

Looks like docs are broken, correct code is

const CleanWebpackPlugin = require('clean-webpack-plugin')

小开

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(),
//...
]
小开

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 merged both to the documentation:

enter image description here

and also to the code:

enter image description here

So I just switched from const CleanWebpackPlugin = require('clean-webpack-plugin') to

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.

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 :)

小开

With the update you'll need to do the following to include it

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.path directory, as well as all unused webpack assets after every successful rebuild.

小开

I am not very much familiar with webpack and currently learning it

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

after uninstall and installing it like that : npm install --save clean-webpack-plugin

and by adding this

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

solved my issue!!

hope it helps

小开

I had the same problem, and I solved it in the following way：


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




plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist']
})
]
小开

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.

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

and

//new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
new CleanWebpackPlugin(),
小开

CleanWebpackPlugin v3.0.0

Replaced default export with named export CleanWebpackPlugin

[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');
小开

I had the same issue today, I figured out that I also had to remove webpack.config.js file.

After deleting the file, i had to rerun npm install

-> Application started successfully.

--

Inside webpack.config.js some old references were placed.

小开

This is probably a weird outlier reason for this - but I just came across this while setting up an old project on a new linux machine. It turned out I didn't have dev dependencies installed for my project (by default if npm config is set to production it won't install dev dependencies when running npm install - although I'm not sure exactly why mine was set to production), my webpack cli is 4 but my project is at 2.6.1 so it was using the webpack 4 but my webpack.config was for 2. So make sure your dev dependencies are installed.

小开

Be also aware of writing it like this

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

and not like this :

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

In my case that small letter C was an issue. It is class name of this plugin which is being imported, so there is no place for arbitrariness in naming.

小开

When import, use { CleanWebpackPlugin } instead of CleanWebpackPlugin

This happens when the version is more than 1.

Example:

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
小开

Webpack v5 doesn't need cleanwebpack. Use output.clean: "true".


提交答案