javascript - TypeError: CleanwebpackPlugin no es un constructor

vue.js webpack-dev-server

Question

Estoy tratando de obtener una vista previa de una aplicación web vue a través de webpack-server-dev. Estoy siguiendo esta guía https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

La guía explica que el complemento se utiliza para eliminar archivos antiguos y no utilizados en el directorio dist. Ya he intentado reemplazar const CleanWebpackPlugin = require(''clean-webpack-plugin'') con const { CleanWebpackPlugin } = require(''clean-webpack-plugin'') que sugieren algunas publicaciones. También he intentado consultar la documentación en https://github.com/johnagan/clean-webpack-plugin pero sin éxito, ya que soy bastante nuevo en esto.

Cuando intento npm run dev este 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)

y este es el archivo 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
}
});

este es el error que obtengo al usar la importación correcta como se explica en la documentación:

 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) 

Si elimino la línea 56 en webpack.config.js puedo ejecutar la aplicación web sin problemas, pero quiero entender el origen de este problema.

Answer 1

Con la actualización necesitarás hacer lo siguiente para incluirla.

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

Luego, en la matriz de plugins reemplazar agregue lo siguiente

plugins: [
new CleanWebpackPlugin([''dist]),
]

con

plugins: [
new CleanWebpackPlugin(),
]

Como con la actualización, no hay necesidad de pasar ningún parámetro, ya que eliminará todos los archivos dentro del directorio output.path de output.path , así como todos los activos de webpack no utilizados después de cada reconstrucción exitosa.

Answer 2

El correcto es usar esta importación:

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

Y luego, en lugar de pasar una matriz con la carpeta de distribución, cámbiela a

plugins: [
new CleanWebpackPlugin(),
//...
]

Answer 3

Parece que los documentos están rotos, el código correcto es

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

Answer 4

Tuve el mismo problema hoy, ahora mismo. Como puede ver, hubo una discrepancia entre los documentos y el código real. Y, de hecho, puede ver en el último compromiso que se fusionaron tanto con la documentación:

y también al código:

Así que acabo de cambiar de const CleanWebpackPlugin = require(''clean-webpack-plugin'') a

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

y funciona bien.

Creo que puede haber sido atrapado entre las cosas. Reinstale el paquete npm y vuelva a intentarlo, debería funcionar.

Escribí un poco de lo que puedes ver en su repositorio público porque, muy a menudo, cuando ocurren cambios repentinos como este, encontrarás tu propia respuesta en el repositorio , probablemente en las últimas confirmaciones. Y es bueno leer un poco del código que usas, especialmente si te ayuda a solucionar tu problema :)