title: 'xxxx'
}
//entry.js
var app = require('./app.js');
console.log(app.title);
但是，webpack與以往的CommonJS引用思路不太一樣，webpack允許任何的靜態(tài)資源作為模塊進(jìn)行引用，包括css、less、html…等等，那么我們需要做的僅僅是加載必要的loader（加載器），如css-loader、less-loader、style-loader等等，那么webpack與vue結(jié)合起來，我們可以通過vue-loader，這樣我們編寫的方式就變成如下:
<style>
/*樣式編寫*/
#compot{
width: 100px;
}
</style>
<template>
<!–模板–>
<div id="compt"></div>
</template>
<script>
//模塊編寫
module.exports = {
}
</script>
最后保存為*.vue文件，入口文件的初始化只需要:
var opts = require('*.vue');//引用*.vue文件
var main = new Vue(opts);//實例化
main.$mount('#app');//渲染
這么一來，使用vue＋webpack，我們實現(xiàn)了：
更多的實踐demo筆者在這里就不展開了，有興趣的小伙伴可以閱讀下無線前端@勾股 的一篇博文——just-vue
工具鏈路在實際開發(fā)上的整合
當(dāng)然，僅僅使用vue webpack，已經(jīng)可以以一種高效的方式進(jìn)行開發(fā)了，但是為了和無線團(tuán)隊的“私貨”結(jié)合起來，我們的開發(fā)鏈路還更完善些，不過是不是有“私貨”就不能使用了，不是的，事實上，“私貨”相對獨立，開發(fā)時也可以完全剝離出來，開發(fā)過程可以自行選擇。
本次導(dǎo)購產(chǎn)品中，使用vue＋webpack的過程中，將其結(jié)合到了gulp中，同時引用gulp-htmlone、autoprefixer-core，主要解決以下幾個問題：
1、讀取webpack配置，運行webpack的loader
2、自動補全css3的前綴
3、打包、下載、壓縮js代碼，最后將所有文件打包成一個*.html文件
圖片處理？
上述的介紹中，似乎涵蓋了html、css、js，但是始終沒有提到圖片上面的處理，作為前端頁面重要的一環(huán)，圖片怎么可能在無線前端中被忽略，筆者下面展開介紹圖片處理上，我們團(tuán)隊的做法
首先，先說說痛點，下圖是不是大多數(shù)情況下圖片的工作流程
那么，在面對雙十一那么大的頁面量時，如果以這樣的方式去工作，那一定會崩潰的…因此在雙十一前，團(tuán)隊已經(jīng)整理出了一套完整的圖片工作方案，因此在雙十一才能以一個全新的面貌展現(xiàn)給大家，下面筆者給大家進(jìn)行介紹：
1、切圖、測量（開發(fā)階段）
切圖和測量的過程，選用的工具依舊是ps或者sketch，借助ps cc2014版的切圖插件Cutterman和標(biāo)注工具Parker進(jìn)行工作；而sketch就不需要提了，本身自帶的強大標(biāo)注和導(dǎo)出功能已經(jīng)讓工作非常便利了
2、上傳和替換地址（打包階段）
以往的圖片上傳和替換地址的工作都為人工所為，如今無線提供一套圖片工具解決方案，通過監(jiān)聽圖片目錄里圖片文件的更換來執(zhí)行上傳命令，同時還支持將小圖片轉(zhuǎn)成base64，最后在替換地址上，根據(jù)不同的屏幕分辨率選擇不同的圖片尺寸，總結(jié)下來這套工具做了下面幾件事：
監(jiān)聽圖片文件，執(zhí)行上傳圖片
小圖轉(zhuǎn)換base64
替換掉代碼中的相對路徑，包括img[src]、background、element.style.background
css代碼中添加根據(jù)屏幕分辨率選擇圖片的邏輯
3、圖片自動優(yōu)化（代碼運行階段）
在這一層面做的圖片優(yōu)化，是在代碼執(zhí)行過程，也就是頁面渲染過程。這個過程基于無線前端的組件lib.img，可以實現(xiàn)根據(jù)尺寸、弱網(wǎng)判斷、屏幕分辨率進(jìn)行圖片的處理，同時提供懶加載的功能，歸納起來有：
根據(jù)尺寸選擇圖片
弱網(wǎng)判斷進(jìn)行選擇
設(shè)備分辨率進(jìn)行選擇
根據(jù)圖片質(zhì)量要求進(jìn)行選擇
匯總起來
前期腳手架搭好后，最后我們的圖片工作流程可能就只需要做下面幾個工作，也就是上述"開發(fā)階段"需要做的事情：
1、切圖、測量，將圖片放入項目的images文件夾
2、代碼中使用相對路徑
OMG！就這么簡單？是的！就是這么簡單！
“雙十一”做的更多的事
不得不說，面對雙十一這么大量級的一個場景，無線前端對產(chǎn)品質(zhì)量層面做了很大的把關(guān)，當(dāng)然少不了的是前端界經(jīng)久不衰的話題——性能優(yōu)化，那么題主給大家盤點下導(dǎo)購小組做的性能優(yōu)化上的事。
性能優(yōu)化，性能優(yōu)化主要集中在兩個層面上的優(yōu)化
1、網(wǎng)絡(luò)加載，可以從資源和圖片上展開，主要有
資源打包壓縮成一個html文件
html文件作為離線包加載到手淘包中，因此整個html文件是不存在網(wǎng)絡(luò)請求loading的
圖片使用工具進(jìn)行尺寸控制，在css代碼中添加不同屏幕下采用不同尺寸的圖片的邏輯
圖片組件lib.img對圖片進(jìn)行精細(xì)化控制，根據(jù)網(wǎng)絡(luò)環(huán)境、高清屏幕、屏幕尺寸選擇不同的圖片，將大圖控制在30kb左右
小圖采用base64加載
首屏渲染接口控制為一個
2、內(nèi)存優(yōu)化，主要在代碼執(zhí)行和圖片大小兩個方面考慮
圖片大小控制在30kb左右，避免長列表加載過多圖片時產(chǎn)生內(nèi)存過高的問題
采用高性能統(tǒng)計方案，性能更優(yōu)
css、js代碼書寫盡量避免性能高耗寫法
前端打底數(shù)據(jù)
由于雙十一場景特殊，盡管咱們的后端和算法同學(xué)做了大量的優(yōu)化、數(shù)據(jù)打底，但是作為頁面的負(fù)責(zé)，還是需要考慮到接口無法訪問的情況，那么雙十一期間根據(jù)接口對數(shù)據(jù)進(jìn)行了打底，具體邏輯如下圖：
不得不提的是，ods是無線基于靜態(tài)服務(wù)器的系統(tǒng)，本身不帶業(yè)務(wù)邏輯，僅僅提供了三個功能：1、定時獲取接口數(shù)據(jù)；2、將數(shù)據(jù)靜態(tài)存儲起來；3、提供jsonp的方式供前端調(diào)用
最后總結(jié)
以上便是無線前端導(dǎo)購小組在本次雙十一的工作流程，當(dāng)初考慮使用vue＋webpack，大家也在想新的技術(shù)是不是能夠經(jīng)得住考驗，事實證明，經(jīng)歷了雙十一這一個大的熔爐下鍛造，這樣的技術(shù)實踐已經(jīng)完全成熟了。最后，以一張大圖結(jié)束，總結(jié)一下無線導(dǎo)購組vue＋webpack在開發(fā)鏈路上的實踐
更多關(guān)于云服務(wù)器，域名注冊，虛擬主機的問題，請訪問西部數(shù)碼官網(wǎng)：m.ps-sw.cn
