webpack3升级到4出现了很多问题,经过验证报错信息如下

1

Module parse failed: Unexpected token (:)
You may need an appropriate loader to handle this file type.
| //Vue.use(Router)
| var Login = function Login() {
> return import( /* webpackChunkName: "login-group"*/'../components/LoginComponent/Login');
| };

此原因是webpack版本过高导致,package.json中配置的

"webpack": "^4.1.1",安装的时候会自动安装成最新的4.32.*,我们把之前安装的卸载掉安装固定的版本4.1.1,package.json中配置:
"webpack": "4.1.1"//可以固定版本
2
Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read property 'vue' of undefined
at Object.module.exports (D:\aat\node_modules\vue-loader\lib\loader.js::) @ ./src/main.js :- :-
@ multi babel-polyfill ./src/main.js

这个原因是由于vue-loader版本造成的,将13.7.2升级成14.*,我这里是14.2.2,配置成固定的版本:

"vue-loader": "^14.2.2",

所以上术两个错误:将webpack版本降到4.1.1,vue-loader升级成14.*就可以解决

注意:webpack4要全局安装webpack-cli   npm install webpack-cli -g

看似简单是小问题导致我找了一天多,真尴尬,现在发出来希望大家少走弯路
												

webpack升级4出现的问题的更多相关文章

  1. 基于vue2.x的webpack升级与项目搭建指南--基础篇

    first thing fitrst 博主声明:绝对不当标题党 有人看最好不过的背景: 十月初对公司产品的前端构建做了一些优化,但还遗留了不少问题(可了解我的前一篇博文:一次webpack小规模优化经 ...

  2. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

  3. webpack 3.1 升级webpack 4.0

    webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...

  4. webpack4升级指南

    webpack4升级指南 鉴于图书项目编译速度极慢的情况(项目里面module太多了,编译慢很正常)且最近需求不多(很少出现的空挡期).所以我觉得搞一波webpack升级,看看有没有帮助.webpac ...

  5. npm run dev--The 'mode' option has not been set, webpack will fallback to 'production' for this value

    npm run dev时报警告: warning configurationThe 'mode' option has not been set, webpack will fallback to ' ...

  6. webpack踩坑--webpack 2.x升级至4.x

    一.安装webpack-cli,webpack@4.26.1 1.npm install webpack-cli -D 2.npm install webpack@4.26.1 -D 二.踩坑 执行n ...

  7. webpack的build的时候时间长处理方案

    观察第一次build的时间比较长,之后的编译时间较短,可以通过webpack -watch 监测性能 1, 将webpack升级到4.0,build 的速度提升很多 2,用webpack -watch ...

  8. webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instead

    webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instea ...

  9. webpack的一些坑

    最近自己着手做一个小的Demo需要webpack,目前版本号是4.41.2,想使用的版本是3.6.0,因3x版本和4x版本很多地方不同,所以在安装过程中也是很多坎坷,下面是遇到的一些坑,和一些解决办法 ...

随机推荐

  1. OpenAPI规范入门

    由于API对于我们的软件运行方式至关重要,因此记录我们的API对于确保我们大型IT组织中的每个人都了解正在发生的事情至关重要,这就是我们使用OpenAPI来帮助记录API规范的原因. 在本文中,我将向 ...

  2. Ubuntu16.04格式化U盘

    root@ubuntu:~# fdisk -l root@ubuntu:~# fdisk /dev/sdb 格式化U盘: root@ubuntu:~# fdisk -l sudo mkfs.ntfs ...

  3. 前端单元测试,以及给现有的vue项目添加jest + Vue Test Utils的配置

    文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...

  4. java中,有关移位运算符的有关讨论

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...

  5. Jmeter接口测试 1=> 接口测试介绍

    第一节 接口测试概念 什么是接口测试概念:接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点. 测试的重点是要检查数据的交换,传递和控制管理过 ...

  6. android#boardcast#广播实现强制下线功能

    参考自<第一行代码>——郭霖 强制下线功能需要先关闭掉所有的活动(Activity),然后回到登录界面.先创建一个ActivityCollector类用于管理所有的活动,代码如下所示: p ...

  7. C++ min函数

    min 是c++标准库头文件中的一个重要的函数.它的功能是一个最小值的函数,比较两个数值的大小,返回他们的之间最小值. #include <algorithm> int a=2; int ...

  8. OpenCV 2.4.8 or OpenCV 2.4.9组件结构全解析

    之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后,再重点学习自己感兴趣的部分的话,就会有一览众山小的感觉,于是,就决定写出这篇文章,作为启程OpenCV系列博文的第二 ...

  9. python中的FQA (python 学习篇 1)

    Q:1.  "  if __name__=='__main__'   "  这句是什么意思,可以不加吗? A:   如果单独运行该文件,则该模块的内容会被执行: 若运行的文件引用该 ...

  10. 查询list转化为tree的两种方式及排序

    方式一,数据库查询tree; MyBatis collection 集合 MyBatis 是数据持久层框架,支持定制化 SQL.存储过程以及高级映射.尤其强大在于它的映射语句,比如高级映射中的 col ...