webpack打包报错-未解决求助

数学那些事 2020-04-17 12:11:16
(node:4416) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:4416) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
Hash: 80331af13cba12be2e3f
Version: webpack 4.42.1
Time: 3700ms
Built at: 2020-04-17 10:36:56
1 asset
Entrypoint main = bundle.js
[1] (webpack)/buildin/global.js 472 bytes {0} [built]
[134] ./src/main.js 6.47 KiB {0} [built]
[146] (webpack)/buildin/module.js 497 bytes {0} [built]
[147] ./node_modules/_moment@2.24.0@moment/locale sync ^\.\/.*$ 3 KiB {0} [optional] [built]
[149] got (ignored) 15 bytes {0} [built]
[150] ./src/lib/mui/css/mui.min.css 1.11 KiB {0} [built]
[151] ./node_modules/_css-loader@0.28.11@css-loader!./src/lib/mui/css/mui.min.css 74.4 KiB {0} [built]
[152] ./src/lib/mui/fonts/mui.ttf 39 KiB {0} [built]
[153] ./src/lib/mui/css/icons-extra.css 1.12 KiB {0} [built]
[154] ./node_modules/_css-loader@0.28.11@css-loader!./src/lib/mui/css/icons-extra.css 3.25 KiB {0} [built]
[155] ./src/lib/mui/fonts/mui-icons-extra.ttf 38.2 KiB {0} [built]
[157] ./src/router.js 2.85 KiB {0} [built]
[170] ./src/App.vue 328 bytes {0} [built] [failed] [1 error]
+ 158 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/App.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/main.js 45:11-31

ERROR in ./src/components/tabbar/MemberContainer.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 13:23-73
@ ./src/main.js

ERROR in ./src/components/tabbar/HomeContainer.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 9:21-69
@ ./src/main.js

ERROR in ./src/components/tabbar/ShopcarContainer.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 17:24-75
@ ./src/main.js

ERROR in ./src/components/tabbar/SearchContainer.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 21:23-73
@ ./src/main.js

ERROR in ./src/components/news/NewsList.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 25:16-57
@ ./src/main.js

ERROR in ./src/components/photos/PhotoList.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 33:17-61
@ ./src/main.js

ERROR in ./src/components/photos/PhotoInfo.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 37:17-61
@ ./src/main.js

ERROR in ./src/components/goods/GoodsList.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 41:17-60
@ ./src/main.js

ERROR in ./src/components/goods/GoodsInfo.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 45:17-60
@ ./src/main.js

ERROR in ./src/components/goods/GoodsComment.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 53:20-66
@ ./src/main.js

ERROR in ./src/components/goods/GoodsDesc.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 49:17-60
@ ./src/main.js

ERROR in ./src/components/news/NewsInfo.vue
Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (J:\前端框架\Vue\vue-----黑马\配套资料\day11\代码\vue-cms\node_modules\_vue-loader@13.7.3@vue-loader\lib\loader.js:61:18)
@ ./src/router.js 29:16-57
@ ./src/main.js

ERROR in TypeError: compilation.templatesPlugin is not a function

- SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
[vue-cms]/[_webpack@3.12.0@webpack]/lib/SetVarMainTemplatePlugin.js:17:15

- Tapable.js:79 Compilation.apply
[node_global]/[webpack]/[tapable]/lib/Tapable.js:79:16

- util.js:89 Compilation.deprecated [as apply]
internal/util.js:89:15

- LibraryTemplatePlugin.js:45
[vue-cms]/[_webpack@3.12.0@webpack]/lib/LibraryTemplatePlugin.js:45:18


- Hook.js:154 SyncHook.lazyCompileHook
[node_global]/[webpack]/[tapable]/lib/Hook.js:154:20

- Compiler.js:630 Compiler.newCompilation
[node_global]/[webpack]/lib/Compiler.js:630:30

- Compiler.js:667
[node_global]/[webpack]/lib/Compiler.js:667:29


- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[node_global]/[webpack]/[tapable]/lib/Hook.js:154:20

- Compiler.js:662 Compiler.compile
[node_global]/[webpack]/lib/Compiler.js:662:28

- Compiler.js:328 Compiler.runAsChild
[node_global]/[webpack]/lib/Compiler.js:328:8

- compiler.js:70
[vue-cms]/[_html-webpack-plugin@2.30.1@html-webpack-plugin]/lib/compiler.js:70:19

- debuggability.js:384 Promise._execute
[vue-cms]/[_bluebird@3.7.2@bluebird]/js/release/debuggability.js:384:9

- promise.js:518 Promise._resolveFromExecutor
[vue-cms]/[_bluebird@3.7.2@bluebird]/js/release/promise.js:518:18

- promise.js:103 new Promise
[vue-cms]/[_bluebird@3.7.2@bluebird]/js/release/promise.js:103:10

- compiler.js:69 Object.compileTemplate
[vue-cms]/[_html-webpack-plugin@2.30.1@html-webpack-plugin]/lib/compiler.js:69:10

- index.js:47
[vue-cms]/[_html-webpack-plugin@2.30.1@html-webpack-plugin]/index.js:47:40


- Hook.js:154 AsyncParallelHook.lazyCompileHook
[node_global]/[webpack]/[tapable]/lib/Hook.js:154:20

- Compiler.js:669
[node_global]/[webpack]/lib/Compiler.js:669:20


- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[node_global]/[webpack]/[tapable]/lib/Hook.js:154:20

- Compiler.js:662 Compiler.compile
[node_global]/[webpack]/lib/Compiler.js:662:28

- Compiler.js:321
[node_global]/[webpack]/lib/Compiler.js:321:11

- Compiler.js:529 Compiler.readRecords
[node_global]/[webpack]/lib/Compiler.js:529:11

- Compiler.js:318
[node_global]/[webpack]/lib/Compiler.js:318:10


- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[node_global]/[webpack]/[tapable]/lib/Hook.js:154:20

- Compiler.js:315
[node_global]/[webpack]/lib/Compiler.js:315:19


- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[node_global]/[webpack]/[tapable]/lib/Hook.js:154:20

- Compiler.js:312 Compiler.run
[node_global]/[webpack]/lib/Compiler.js:312:24

- cli.js:353 processOptions
[node_global]/[webpack-cli]/bin/cli.js:353:14

- cli.js:364
[node_global]/[webpack-cli]/bin/cli.js:364:3

- yargs.js:567 Object.parse
[node_global]/[webpack-cli]/[yargs]/yargs.js:567:18

- cli.js:49
[node_global]/[webpack-cli]/bin/cli.js:49:8

- cli.js:366 Object.<anonymous>
[node_global]/[webpack-cli]/bin/cli.js:366:3

- loader.js:1158 Module._compile
internal/modules/cjs/loader.js:1158:30

- loader.js:1178 Object.Module._extensions..js
internal/modules/cjs/loader.js:1178:10

- loader.js:1002 Module.load
internal/modules/cjs/loader.js:1002:32

- loader.js:901 Function.Module._load
internal/modules/cjs/loader.js:901:14
#####
之前可以webpack进行打包
...全文
309 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
jio可 2020-04-17
  • 打赏
  • 举报
 回复
如果不行直接使用vue cli3.0配置，自己百度。或者使用vue ui创建一个新项目把代码复制过去
jio可 2020-04-17
  • 打赏
  • 举报
 回复
删除node_modules 重新npm install
jio可 2020-04-17
  • 打赏
  • 举报
 回复
你都没搞明白什么是本地运行一个webpack服务和打包的区别，打包是把项目文件合并压缩生成一个dist文件夹，然后可以copy这个文件夹到tomcat/nginx里面直接运行 项目结构应该会有一个打包的配置文件，bulid文件夹里面或者其他的什么文件，直接配置到package build里面
数学那些事 2020-04-17
  • 打赏
  • 举报
 回复
”scripts": { "dev": "webpack --mode development", // 开发环境 "build": "webpack --mode production", // 生产环境 } 加上它仍然报错
数学那些事 2020-04-17
  • 打赏
  • 举报
 回复
webpack.config.js文件 // 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的 var path = require('path') // 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部 // 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点 var htmlWebpackPlugin = require('html-webpack-plugin') // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建 module.exports = { entry: path.join(__dirname, './src/main.js'), // 入口文件 output: { // 指定输出选项 path: path.join(__dirname, './dist'), // 输出路径 filename: 'bundle.js' // 指定输出文件的名称 }, plugins: [ // 所有webpack 插件的配置节点 new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), // 指定模板文件路径 filename: 'index.html' // 设置生成的内存页面的名称 }) ], module: { // 配置所有第三方loader 模块的 rules: [ // 第三方模块的匹配规则 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串 { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法 { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader ] }, resolve: { alias: { // 修改 Vue 被导入时候的包的路径 // "vue$": "vue/dist/vue.js" } } }
数学那些事 2020-04-17
  • 打赏
  • 举报
 回复
引用 3 楼 jio可 的回复:
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1 --mode development"
加上mode development仍然是那个错
jio可 2020-04-17
  • 打赏
  • 举报
 回复
打包你要配置 "build": "node bulid/build.js" 应该有一个build.js dev只是本地运行一个webpack服务
jio可 2020-04-17
  • 打赏
  • 举报
 回复
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1 --mode development"
数学那些事 2020-04-17
  • 打赏
  • 举报
 回复
package.json文件如下： { "name": "01.webpack-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-remove-strict-mode": "^0.0.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-template-compiler": "^2.5.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.11.5" }, "dependencies": { "bootstrap": "^3.3.7", "mint-ui": "^2.2.9", "moment": "^2.19.1", "vue": "^2.5.2", "vue-preview": "^1.0.5", "vue-resource": "^1.3.4", "vue-router": "^3.0.1", "vuex": "^3.0.1" } } 可以正常使用npm run dev ,但无法进行webpack打包 其webpack安装4版本以后,npm run dev也无法运行
jio可 2020-04-17
  • 打赏
  • 举报
 回复
package里面没有配置mode 打包环境
由浅入深配置webpack4
webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。
html中的打包标签,webpack,_Webpack中入口的index.html中script标签的js如何打包？，webpack - phpStudy...
Webpack中入口的index.html中script标签的js如何打包？webpack构建一个angular项目，入口文件为index.html里面用了script标签 引入../public/js/main.js的静态标签在生产者模式时，这些js和相关的png不会打包到dist文件夹中。即访问localhost:xxxx时会出现访问../public/js/main.js 404的错误。请问...
vue2怎么配置项目路径,创建vue2项目
css'}引用css文件的方式可以采用require，比如在中require('');初始化项目新建项目目录vue2practice，npminit初始化，在中添加必要的模块如下："devDependencies":{"vue":"^2.0.7","vue-loader":"^9.9.5","vue-router":"^2.0.2","webpack":"^1.13.3","webpack-dev-server":"^1.16.2"}新建目录结构如下图，新建的文件先空着，后面步骤会说明添加什么内容。
WHAT - 动态导入模块遇到版本更新解决方案
方案推荐度说明捕获加载错误提示刷新⭐⭐⭐⭐⭐简单有效，用户体验好构建版本检测⭐⭐⭐⭐更优雅，适合多人协作的产品自动刷新页面⭐⭐⭐可行，但用户可能不喜欢页面突然刷新保留旧版本模块⭐⭐成本高，不推荐正确使用懒加载路径⭐⭐⭐⭐技术细节层面的补充防线。
60个Vue常见问题汇总及解决方案
Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 yarn 和...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章