由於 webpack3升級後，新增了 Scope Hositing（作用域提升） 功能，據說是對 js的效能提升很大。因此，我們做了一個測試對比，就是 webpack3和 webpack1/2 的效能對比，如下：

測試目標

       以下資料是2天隨機時段3部手機各2組資料，每組資料都是30次取平均值，為了測試js的解析能力，排除了網路請求的影響

• 平臺：M5 Note Build/MRA58K

• 系統：android 6.0

平均提升：42.55%

• 平臺：MI 3C Build/KTU84P

• 系統：Android 4.4.4

平均提升：42.74%

• 平臺：SM901 Build/MXB48T

• 系統：Android 6.0.1

平均提升：32.75%

       以上資料，提升比例雖然有所差距，但是，最後的結果，都表明......你應該毫不猶豫的升級你的 webpack了。

       問題來了，如何能快速且平滑的升級你的 webpack呢？這是我們今天的重點，前面都是鋪墊，哈哈

升級webpack3

       今天只以 vue專案來舉例， vue-cli升級 w3簡直不要太快哦，而且也有專案上線成功了，並且線上測試與本地測試結果基本一致。如果使用的是 react專案，用的又是腳手架的話，那麼恭喜你，跟 vue-cli一樣快，可參考 vue-cli的升級方式，如果你自己寫的 w2的話加一個配置（可以體驗跟 vue-cli一樣的升級體驗哦），然後升級相應擴充套件：

1. 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的最新語法進行修改遷移了

1.    plugins: [

2.        new webpack.optimize.ModuleConcatenationPlugin()

3.    ]

• 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，批量檢查更新，簡直不要太好用

       不過凡事都有例外，錯誤也一樣，升級過程中遇到了如下錯誤： 

       FQ搜了半天，發現是 "vue":"^2.3.4" 版本對應的 vue-loader版本不對，最好是 >vue-[email protected]^7.0.0&&<vue-[email protected]^12.0.0。

       所以，剩下很大一部分錯誤就是框架和編譯器的版本對應問題的鍋了，多FQ，多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"

 ]

}

如果你喜歡我們的文章，關注我們的公眾號和我們互動吧。