由於 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" ] }
如果你喜歡我們的文章，關注我們的公眾號和我們互動吧。
