快速将Vue项目升级到webpack3的方法步骤

前言

由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大。因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下:

测试目标

以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响

平台:M5 Note Build/MRA58K

系统:android 6.0

时间 before after
2017-08-10 13:00 920 511
2017-08-11 11:10 915 543

平均提升:42.55%

平台:MI 3C Build/KTU84P

系统:Android 4.4.4

时间 before after
2017-08-13 15:00 648 365
2017-08-14 17:10 648 377

平均提升:42.74%

平台:SM901 Build/MXB48T

系统:Android 6.0.1

时间 before after
2017-08-13 18:00 593 393
2017-08-14 15:50 575 392

平均提升:32.75%

以上数据,提升比例虽然有所差距,但是,最后的结果,都表明......你应该毫不犹豫的升级你的 webpack了。

问题来了,如何能快速且平滑的升级你的 webpack呢?这是我们今天的重点,前面都是铺垫,哈哈

升级webpack3

今天只以 vue项目来举例, vue-cli升级 w3简直不要太快哦,而且也有项目上线成功了,并且线上测试与本地测试结果基本一致。如果使用的是 react项目,用的又是脚手架的话,那么恭喜你,跟 vue-cli一样快,可参考 vue-cli的升级方式,如果你自己写的 w2的话加一个配置(可以体验跟 vue-cli一样的升级体验哦),然后升级相应扩展:

new webpack.optimize.ModuleConcatenationPlugin()

如果是自己写的 w1的话,对不起,你只能去哭着对比 w3和 w1的语法兼容修改配置文件了,网上有详细的语法对比,这里就不详述了

步骤

  • 下载最新的的 vue-cli,初始化一个新项目 tow3
  • 把你的 src 目录下的业务代码拷贝到新建的 tow3 项目中 src 路径替换了
  • 把 config/index.js 更细成你自己项目的,这里需要注意的是, webpack3此文件的配置和 webpack1、2都不太一样,所以仔细比对,只修改一样的配置项
  • 在 build/webpack.prod.conf.js 配置里文件里的加上如下配置,这是 webpack3升级的最核心功能(加在这个文件时因为我生产环境不需要),如果本身打包策略做了优化,那么就需要对造 webpack3的最新语法进行修改迁移了
plugins:[
 new webpack.optimize.ModuleConcatenationPlugin()
 ]
  • npm run dev & npm run build 缺什么包就装什么包,如图

然后,就是辣么简单,ok了

壮士,请留步。。。其实还有

每个人安装过程中都可能遇到不同的错,甚至是不显示错误信息,让人蛋疼又心碎,辣么如何进行科学的报错呢?其实很简单,如下

错误调试

在 build/webpack.dev.conf.js 里有自带错误调试的插件

new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin(

但它并不能满足我们,我升级过程中就发现,很多bug只出现了个 error,不出现错误信息,这让我如何调试啊,臣妾完全做不到啊

我们只需要修改一行配置:

new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin({
 onErrors:function(severity,errors){
 console.log(errors);
 }
 })

常见错误也就是 npm包版本不匹配,升级最新的包就行,推荐工具 npm-check,批量检查更新,简直不要太好用

不过凡事都有例外,错误也一样,升级过程中遇到了如下错误:

翻墙搜了半天,发现是 "vue":"^2.3.4" 版本对应的 vue-loader版本不对,最好是 >vue-loader@^7.0.0&&<vue-loader@^12.0.0。
所以,剩下很大一部分错误就是框架和编译器的版本对应问题的锅了,多翻墙,多google,让一切难题变得不难。

哈哈,有了这些就算再狡猾的妖精,也逃不过老孙的金箍棒了。

好了,请开始你的表演吧。

最后

赠送一份 package.json的配置,此配置乃最终兼容版,eslint好烦,我把它注释了,目前已上线,运行良好

{
 "name":"w3",
 "version": "1.0.0",
 "description":"w3",
 "author": "yuanxiaolong",
 "private":true,
 "scripts":{
 "dev":"node build/dev-server.js",
 "start":"node build/dev-server.js",
 "build":"node build/build.js",
 "lint":"eslint --ext .js,.vue src"
 },
 "dependencies":{
 "vue":"^2.0.0",
 "vue-resource":"0.8.0",
 "vue-router":"^2.0.0",
 "vuex":"^2.0.0"
 },
 "devDependencies":{
 "autoprefixer":"^7.1.2",
 "babel-core":"^6.25.0",
 "babel-loader":"^7.1.1",
 "babel-plugin-component":"^0.10.0",
 "babel-plugin-transform-class-constructor-call":
 "^6.24.1",
 "babel-plugin-transform-object-assign":"^6.22.0",
 "babel-plugin-transform-runtime":"^6.23.0",
 "babel-preset-es2015":"^6.24.1",
 "babel-preset-stage-2":"^6.24.1",
 "babel-register":"^6.24.1",
 "chalk":"^2.1.0",
 "connect-history-api-fallback":"^1.3.0",
 "copy-webpack-plugin":"^4.0.1",
 "css-loader":"^0.28.0",
 "cssnano":"^3.10.0",
 "eventsource-polyfill":"^0.9.6",
 "express":"^4.14.1",
 "extract-text-webpack-plugin":"^3.0.0",
 "file-loader":"^0.11.1",
 "friendly-errors-webpack-plugin":"^1.1.3",
 "html-webpack-inline-source-plugin":"0.0.9",
 "html-webpack-plugin":"^2.30.1",
 "http-proxy-middleware":"^0.17.3",
 "less":"^2.7.2",
 "less-loader":"^4.0.5",
 "opn":"^5.1.0",
 "optimize-css-assets-webpack-plugin":"^2.0.0",
 "ora":"^1.3.0",
 "path":"^0.12.7",
 "rimraf":"^2.6.1",
 "semver":"^5.3.0",
 "shelljs":"^0.7.8",
 "uglifyjs-webpack-plugin":"^1.0.0-beta.2",
 "url-loader":"^0.5.8",
 "vue-loader":"^12.2.2",
 "vue-style-loader":"^3.0.1",
 "vue-template-compiler":"^2.4.2",
 "webpack":"^3.5.3",
 "webpack-bundle-analyzer":"^2.2.1",
 "webpack-dev-middleware":"^1.12.0",
 "webpack-hot-middleware":"^2.18.2",
 "webpack-merge":"^4.1.0"
},
 "engines":{
 "node":">= 4.0.0",
 "npm":">= 3.0.0"
},
 "browserslist":[
 "last 11 iOS versions"
 ]
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • webpack构建vue项目的详细教程(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • 用Webpack构建Vue项目的实践

    最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过本篇文章分享给更多人 开始之前,需要安装node环境.(安装过程在此就不啰嗦了) 1.创建基本结构首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录.创建一个没有任何依赖关系的package.json,可以通过命令行 npm init 创建. 配置下基本信息即可.创建一个index.html文件,这个是显示在浏览器中的页面. 注意:1.这里的

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • 快速将Vue项目升级到webpack3的方法步骤

    前言 由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 5

  • vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import  "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu

  • 如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • webpack3.0升级4.0的方法步骤

    1.webpack 3.11升级4.26 为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的"打包"和"压缩"功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些. 2. 安装/升级依赖 这些依赖有的是在build过程中发现依赖有新的替换或者报错,逐步替换的,如果想遇到多个坑,可以先把webpack.webpack-cli升级到对应版本 devD

  • Vue项目引进ElementUI组件的方法

    环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • vue-cli3项目升级到vue-cli4 的方法总结

    这是我对以前配置的基于vue-cli3搭建的前端H5模板的升级,主要把vue-cli3项目升级为vue-cli4,并删除一些过时插件.插件版本升级到当前(2020-03-19)最高版本(升级了很多webpack插件版本),升级完后新加多域名代理配置,官方升级文档点我点我 按着官方的文档升级来也会碰到很多坑,

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

随机推荐