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

快速将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的语法兼容修改http://配置文件了，网上有详细的语法对比，这里就不详述了

步骤

下载最新的的 vue-cli，初始化一个新项目 tow3

把你的 src 目录下的业务代码拷贝到新建的 tow3 项目中 src 路径替换了

把 config/index.js 更细成你自己项目的，这里需要注意的是， webpack3此文件的配置和 webpack1nUTfhK、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&&

所以，剩下很大一部分错误就是框架和编译器的版本对应问题的锅了，多翻墙，多google，让一切难题变得不难。

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

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

最后

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

{

"name":"w3",

"version": "1.0.0",

"description":"w3",

"author": "yuanxiaolong",

"private":true,

"scripts":nUTfhK{

"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"

]

}

总结

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

所以，剩下很大一部分错误就是框架和编译器的版本对应问题的锅了，多翻墙，多google，让一切难题变得不难。

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

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

最后

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

{

"name":"w3",

"version": "1.0.0",

"description":"w3",

"author": "yuanxiaolong",

"private":true,

"scripts":nUTfhK{

"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"

]

}

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。