快速将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"
 ]
}

总结

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

# webpack3  # vue  # vue2  # webpack配置  # webpack构建vue项目的详细教程（配置篇）  # Vue项目webpack打包部署到服务器的实例详解  # 详解vue项目优化之按需加载组件-使用webpack require.ensure  # 详解用vue-cli来搭建vue项目和webpack  # 用Webpack构建Vue项目的实践  # 的是  # 都是  # 这是  # 你自己  # 错误信息  # 让人  # 都有  # 来了  # 也有  # 好了  # 金箍棒  # 又是  # 不太  # 不需要  # 就不  # 每个人  # 有一定  # 把它  # 半天  # 就行 

相关文章： 魔方云NAT建站如何实现端口转发？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  如何确认建站备案号应放置的具体位置？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  教学论文网站制作软件有哪些,写论文用什么软件 ？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  如何生成腾讯云建站专用兑换码？  网站微信制作软件,如何制作微信链接？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  如何挑选最适合建站的高性能VPS主机？  制作销售网站教学视频,销售网站有哪些？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  如何快速查询网站的真实建站时间？  学校为何禁止电信移动建设网站？  建站之星在线版空间：自助建站+智能模板一键生成方案  如何在云虚拟主机上快速搭建个人网站？  如何快速搭建安全的FTP站点？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  高端云建站费用究竟需要多少预算？  为什么Go需要go mod文件_Go go mod文件作用说明  如何基于云服务器快速搭建个人网站？  网站制作公司排行榜,抖音怎样做个人官方网站  高端智能建站公司优选：品牌定制与SEO优化一站式服务  实例解析angularjs的filter过滤器  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  香港网站服务器数量如何影响SEO优化效果？  如何在Windows环境下新建FTP站点并设置权限？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  jQuery 常见小例汇总  行程制作网站有哪些,第三方机票电子行程单怎么开？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  黑客如何利用漏洞与弱口令入侵网站服务器？  Swift中switch语句区间和元组模式匹配  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  建站之星收费标准详解：套餐费用及年费价格表一览  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  网站插件制作软件免费下载,网页视频怎么下到本地插件？  如何构建满足综合性能需求的优质建站方案？  如何用5美元大硬盘VPS安全高效搭建个人网站？  海南网站制作公司有哪些,海口网是哪家的？  建站之星如何通过成品分离优化网站效率？  如何在阿里云通过域名搭建网站？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何在阿里云购买域名并搭建网站？  如何制作算命网站,怎么注册算命网站？  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  香港服务器选型指南：免备案配置与高效建站方案解析