问题
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
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-plugin but without succes as i am pretty new to this.
when i try to npm run dev i get this error
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
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
回答1:
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(),
//...
]
回答2:
I had the same problem, and I solved it in the following way：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist']
})
]回答3:
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.
回答4:
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:
and also to the code:
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 :)
回答5:
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(),
回答6:
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
回答7:
Looks like docs are broken, correct code is
const CleanWebpackPlugin = require('clean-webpack-plugin')
来源：https://stackoverflow.com/questions/56567930/typeerror-cleanwebpackplugin-is-not-a-constructor