类型错误: clean webpackplugin 不是构造函数

共4个回答, 标签: javascript vue.js webpack webpack-dev-server

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

该指南解释说,插件用于删除 dist 目录中的旧文件和未使用的文件。我已经试过更换了const CleanWebpackPlugin = require('clean-webpack-plugin') with const { CleanWebpackPlugin } = require('clean-webpack-plugin')一些帖子建议这样做。我也尝试过查看上的文档Https://github.com/johnagan/clean-webpack-plugin但是没有成功,因为我对这个很陌生。

当我试着npm run dev我得到这个错误

新的 clean webpackplugin ([“发行”),
^

类型错误: clean webpackplugin 不是构造函数
At 模块.导出 (C: \ 用户 \ Eson \ 桌面 \ pwa-vue-app-1 \ webpack.config.js: 56: 5)
在 handleFunction (C: \ Users \ node_modules pwa-vue-app-1 Eson \ 桌面 \ 的WebPack-utils cli \ bin \ \ prepareOptions。记者: 21: 将要采取的)
在 prepareOptions (C: \ Users \ Eson \ Desktop \ pwa-vue-app-1 \ node_modules \ webpack-cli \ bin \ utils \ prepareOptions.js: 9:5)
在 requireConfig (C: \ 用户 \ Eson \ 桌面 \ pwa-vue-app-1 \ 节点 _ 模块 \ webpack-cli \ bin \ utils \ convert-argv.js: 119: 14)
在 C: \ 用户 \ Eson \ 桌面 \ pwa-vue-app-1 \ 节点 _ 模块 \ webpack-cli \ bin \ utils \ convert-argv.js: 125: 17
在数组.forEach ()
At 模块。导出 (C: \ 用户 \ Eson \ 桌面 \ pwa-vue-app-1 \ 节点 _ 模块 \ webpack-cli \ bin \ utils \ convert-argv.js: 123: 15)
在对象。(C: \ 用户 \ Eson \ 桌面 \ pwa-vue-app-1 \ 节点 _ 模块 \ webpack-dev-server \ bin \ webpack-dev-server.js: 79: 40)
At 模块._ 编译 (内部/模块/cjs/loader.js: 776: 30)
在 Object.Module._ extensions..js (内部/模块/cjs/loader.js: 787: 10)
在模块加载时 (内部/模块/cjs/loader.js: 653: 32)
在 tryModuleLoad (内部/模块/cjs/loader.js: 593: 12)
在功能.模块._ load (内部/模块/cjs/loader.js: 585: 3)
在功能。模块。 runMain (内部/模块/cjs/loader。js: 829: 12)
启动时 (内部/引导/node.js: 283: 19)
在 bootnodenodejscore (内部/引导/node.js: 622: 3)

这是 webpack.config.js 文件

康斯特 path = 需要 ('path')

康斯特 {VueLoaderPlugin} = 需要 ('vue-loader')
康斯特 HtmlWebpackPlugin = 需要 ('html-的WebPack-plugin')
康斯特 CopyWebpackPlugin = 需要 ('copy-的WebPack-plugin')
康斯特 CleanWebpackPlugin = 要求 (“清洁-的WebPack-plugin')

模块.导出 = (arg, argv) => ({
模式: argv & & argv。模式 | “开发”,
Devtool :( argv & & argv.mode | | 'development') = =' produc'?“源地图”: “eval”,

条目: './src/app.js',

输出: {
路径: 路径。解析 (_ _ dirname,'dist'),
文件名: “[姓名”。
},

节点: false,

模块: {
规则: [
{
测试:/\。vue $/,
加载器: “vue-load”
},
{
测试:/\.js $/,
加载器: “babel-load”
},
{
测试:/\.css $/,
用途: 【
Vue 风格的加载器,
Css 加载器
],
排除:/\.模块 \.css $/
}
]
},

解析: {
扩展: [
'。
“武”,
"Json'
],
别名: {
'Vue $ ': 'vue/区/vue.esm。js',
“@”: 路径。解析 (_ _ dirname,'src')
}
},

插件: [
新的 clean webpackplugin ([“发行”),
新的 vueloader插件 (),
新的 html webpackplugin ({
模板: path.resolve (_ _ dirname,'static',' index.html '),
注入: 真
),
新的 CopyWebpackPlugin ([{
来自: 道路的决心 (_ _ 目录名,'static'),
路径解析 (_ _ dirna
第1个答案

正确的方法是使用这个导入:

康斯特 {CleanWebpackPlugin} = 要求 (“清洁-的WebPack-plugin');”

我没有通过一系列与分配的文件夹,改变它,

插件: [
新的 clean webpackplugin (),
//..
]
第2个答案

我今天也有同样的问题,现在。正如你所知道的,文档和实际代码之间存在不匹配。事实上,你可以在他们合并的最后一次提交文档的两个部分:

enter image description here

还有代码:

enter image description here

所以我就换了const { CleanWebpackPlugin } = require('clean-webpack-plugin'); and new CleanWebpackPlugin()它工作正常。

我认为你可能在两件事之间被卡住了。重新安装 npm 包并重试,应该可以工作。

第3个答案

更新后,您需要执行以下操作来包括它

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

然后在插件数组中替换添加以下内容

插件: [
新的 clean webpackplugin (['dist),
]

插件: [
新的 clean webpackplugin (),
]

随着更新的进行,不需要传递任何参数,因为它会删除 webpack 中的所有文件output.path每次成功重建后,目录以及所有未使用的 webpack 资产。

第4个答案

看起来文档被破坏了,正确的代码是

康斯特 CleanWebpackPlugin = 要求 (“清洁-的 WebPack-plugin')

相关问题

如何从异步调用返回响应? 循环中的 JavaScript 闭包--简单的实际示例 如何从异步调用返回响应? 如何在不添加历史记录的情况下推送到 vue 路由器? 找不到模块 “。/src/数据” 与 vue-cli 创建可以管理外部数据的抽象组件 类型错误: clean webpackplugin 不是构造函数 Postcss-svgo: TypeError: 无法设置未定义 (盖茨比) 的属性 “multiscont” Webpack 文件加载器输出 [目标模块] 如何修复 Vuejs 中的 “webpack Dev Server 无效选项” 根级别的 Angular 代理