前言
由于 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的語法兼容修改配置文件了，網上有詳細的語法對比，這里就不詳述了
步驟
plugins:[ new webpack.optimize.ModuleConcatenationPlugin() ]
然后，就是辣么簡單，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" ]}總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
