快捷導(dǎo)航

快速將Vue項目升級到webpack3的方法步驟

更新時間：2017年09月14日 10:32:07 作者：袁小龍

這篇文章主要給大家介紹了關(guān)于如何快速將Vue項目升級到webpack3的方法步驟文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

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

測試目標

以下數(shù)據(jù)是2天隨機時段3部手機各2組數(shù)據(jù)，每組數(shù)據(jù)都是30次取平均值，為了測試js的解析能力，排除了網(wǎng)絡(luò)請求的影響

平臺：M5 Note Build/MRA58K

系統(tǒng)：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

系統(tǒng)：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

系統(tǒng)：Android 6.0.1

時間	before	after
2017-08-13 18:00	593	393
2017-08-14 15:50	575	392

平均提升：32.75%

以上數(shù)據(jù)，提升比例雖然有所差距，但是，最后的結(jié)果，都表明......你應(yīng)該毫不猶豫的升級你的 webpack了。

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

升級webpack3

今天只以 vue項目來舉例， vue-cli升級 w3簡直不要太快哦，而且也有項目上線成功了，并且線上測試與本地測試結(jié)果基本一致。如果使用的是 react項目，用的又是腳手架的話，那么恭喜你，跟 vue-cli一樣快，可參考 vue-cli的升級方式，如果你自己寫的 w2的話加一個配置（可以體驗跟 vue-cli一樣的升級體驗哦），然后升級相應(yīng)擴展：

new webpack.optimize.ModuleConcatenationPlugin()

如果是自己寫的 w1的話，對不起，你只能去哭著對比 w3和 w1的語法兼容修改配置文件了，網(wǎng)上有詳細的語法對比，這里就不詳述了

步驟

下載最新的的 vue-cli，初始化一個新項目 tow3
把你的 src 目錄下的業(yè)務(wù)代碼拷貝到新建的 tow3 項目中 src 路徑替換了
把 config/index.js 更細成你自己項目的，這里需要注意的是， webpack3此文件的配置和 webpack1、2都不太一樣，所以仔細比對，只修改一樣的配置項
在 build/webpack.prod.conf.js 配置里文件里的加上如下配置，這是 webpack3升級的最核心功能(加在這個文件時因為我生產(chǎn)環(huán)境不需要)，如果本身打包策略做了優(yōu)化，那么就需要對造 webpack3的最新語法進行修改遷移了

plugins:[ 
 new webpack.optimize.ModuleConcatenationPlugin()
 ]

npm run dev & npm run build 缺什么包就裝什么包，如圖

然后，就是辣么簡單，ok了

壯士，請留步。。。其實還有

每個人安裝過程中都可能遇到不同的錯，甚至是不顯示錯誤信息，讓人蛋疼又心碎，辣么如何進行科學(xué)的報錯呢？其實很簡單，如下

錯誤調(diào)試

在 build/webpack.dev.conf.js 里有自帶錯誤調(diào)試的插件

new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin(

但它并不能滿足我們，我升級過程中就發(fā)現(xiàn)，很多bug只出現(xiàn)了個 error，不出現(xiàn)錯誤信息，這讓我如何調(diào)試啊，臣妾完全做不到啊

我們只需要修改一行配置：

new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin({
 onErrors:function(severity,errors){
 console.log(errors);
 }
 })

常見錯誤也就是 npm包版本不匹配，升級最新的包就行，推薦工具 npm-check，批量檢查更新，簡直不要太好用

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

翻墻搜了半天，發(fā)現(xiàn)是 "vue":"^2.3.4" 版本對應(yīng)的 vue-loader版本不對，最好是 >vue-loader@^7.0.0&&<vue-loader@^12.0.0。
所以，剩下很大一部分錯誤就是框架和編譯器的版本對應(yīng)問題的鍋了，多翻墻，多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"
 ]
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: