首先，我會先簡單介紹一下 vue 和 webpack：
(當(dāng)然如果你已經(jīng)比較熟悉它們的話前兩個部分可以直接跳過)
Vue.js 是一款極簡的 mvvm 框架，如果讓我用一個詞來形容它，就是 “輕·巧” 。如果用一句話來描述它，它能夠集眾多優(yōu)秀逐流的前端框架之大成，但同時保持簡單易用。廢話不多說，來看幾個例子：
<script src="vue.js"></script><div id="demo"> {{message}} <input v-model="message"></div><script> var vm = new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } })</script>首先，代碼分兩部分，一部分是 html，同時也是視圖模板，里面包含一個值為message的文本何一個相同值的輸入框；另一部分是 script，它創(chuàng)建了一個 vm 對象，其中綁定的 dom 結(jié)點是#demo，綁定的數(shù)據(jù)是{message: 'Hello Vue.js'}，最終頁面的顯示效果就是一段Hello Vue.js文本加一個含相同文字的輸入框，更關(guān)鍵的是，由于數(shù)據(jù)是雙向綁定的，所以我們修改文本框內(nèi)文本的同時，第一段文本和被綁定的數(shù)據(jù)的message字段的值都會同步更新——而這底層的復(fù)雜邏輯，Vue.js 已經(jīng)全部幫你做好了。
我們還可以加入更多的 directive，比如：
<script src="vue.js"></script><div id="demo2"> <img title="{{name}}" alt="{{name}}" v-attr="src: url"> <input v-model="name"> <input v-model="url"></div><script> var vm = new Vue({ el: '#demo', data: { name: 'taobao', url: 'https://www.taobao.com/favicon.ico' } })</script>這里的視圖模板加入了一個<img>標(biāo)簽，同時我們看到了 2 個特性的值都寫作了{(lán){name}}。這樣的話，圖片的title和alt特性值就都會被綁定為字符串'taobao'。
如果想綁定的特性是像img[src]這樣的不能在 html 中隨意初始化的 (可能默認(rèn)會產(chǎn)生預(yù)期外的網(wǎng)絡(luò)請求)，沒關(guān)系，有v-attr="src: url"這樣的寫法，把被綁定的數(shù)據(jù)里的url同步過來。
沒有介紹到的功能還有很多，推薦大家來我(發(fā)起并)翻譯的 Vue.js 中文文檔
最后要介紹 Vue.js 對于 web 組件化開發(fā)的思考和設(shè)計
如果我們要開發(fā)更大型的網(wǎng)頁或 web 應(yīng)用，web 組件化的思維是非常重要的，這也是今天整個前端社區(qū)長久不衰的話題。
Vue.js 設(shè)計了一個*.vue格式的文件，令每一個組件的樣式、模板和腳本集合成了一整個文件， 每個文件就是一個組件，同時還包含了組件之間的依賴關(guān)系，麻雀雖小五臟俱全，整個組件從外觀到結(jié)構(gòu)到特性再到依賴關(guān)系都一覽無余 ：
并且支持預(yù)編譯各種方言：
這樣再大的系統(tǒng)、在復(fù)雜的界面，也可以用這樣的方式庖丁解牛。當(dāng)然這種組件的寫法是需要編譯工具才能最終在瀏覽器端工作的，下面會提到一個基于 webpack 的具體方案。
從功能角度，template, directive, data-binding, components 各種實用功能都齊全，而 filter, computed var, var watcher, custom event 這樣的高級功能也都洋溢著作者的巧思；從開發(fā)體驗角度，這些設(shè)計幾乎是完全自然的，沒有刻意設(shè)計過或欠考慮的感覺，只有個別不得已的地方帶了自己框架專屬的v-前綴。從性能、體積角度評估，Vue.js 也非常有競爭力！
webpack 是另一個近期發(fā)現(xiàn)的好東西。它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。
舉個例子，現(xiàn)在有個腳本主文件app.js依賴了另一個腳本module.js
// app.jsvar module = require('./module.js')... module.x ...// module.jsexports.x = ...則通過webpack app.js bundle.js命令，可以把app.js和module.js打包在一起并保存到bundle.js
同時 webpack 提供了強大的 loader 機制和 plugin 機制，loader 機制支持載入各種各樣的靜態(tài)資源，不只是 js 腳本、連 html, css, images 等各種資源都有相應(yīng)的 loader 來做依賴管理和打包；而 plugin 則可以對整個 webpack 的流程進(jìn)行一定的控制。
比如在安裝并配置了 css-loader 和 style-loader 之后，就可以通過require('./bootstrap.css')這樣的方式給網(wǎng)頁載入一份樣式表。非常方便。
webpack 背后的原理其實就是把所有的非 js 資源都轉(zhuǎn)換成 js (如把一個 css 文件轉(zhuǎn)換成“創(chuàng)建一個style標(biāo)簽并把它插入document”的腳本、把圖片轉(zhuǎn)換成一個圖片地址的 js 變量或 base64 編碼等)，然后用 CommonJS 的機制管理起來。一開始對于這種技術(shù)形態(tài)我個人還是不太喜歡的，不過隨著不斷的實踐和體驗，也逐漸習(xí)慣并認(rèn)同了。
最后，對于之前提到的 Vue.js，作者也提供了一個叫做 vue-loader 的 npm 包 ，可以把*.vue文件轉(zhuǎn)換成 webpack 包，和整個打包過程融合起來。所以有了 Vue.js、webpack 和 vue-loader，我們自然就可以把它們組合在一起試試看！
回到正題。今天要分享的是，是基于上面兩個東西：Vue.js 和 webpack，以及把它們串聯(lián)起來的 vue-loader
Vue.js 的作者以及提供了一個基于它們?nèi)叩?nbsp;項目示例 。而我們的例子會更貼近實際工作的場景，同時和團隊之前總結(jié)出來的項目特點和項目流程相吻合。
通過gulpfile.js我們可以設(shè)計整套基于 webpack 的打包/監(jiān)聽/調(diào)試的任務(wù)
在 gulp-webpack 包的官方文檔里推薦的寫法是這樣的：
var gulp = require('gulp');var webpack = require('gulp-webpack');var named = require('vinyl-named');gulp.task('default', function() { return gulp.src(['src/app.js', 'test/test.js']) .pipe(named()) .pipe(webpack()) .pipe(gulp.dest('dist/'));});我們對這個文件稍加修改，首先加入 vue-loader
tnpm install vue-loader --save.pipe(webpack({ module: { loaders: [ { test: /\.vue$/, loader: 'vue'} ] }}))其次，把要打包的文件列表從gulp.src(...)中抽出來，方便將來維護(hù)，也有機會把這個信息共享到別的任務(wù)
var appList = ['main', 'sub1', 'sub2']gulp.task('default', function() { return gulp.src(mapFiles(appList, 'js')) ...})/** * @private */function mapFiles(list, extname) { return list.map(function (app) {return 'src/' + app + '.' + extname})}現(xiàn)在運行g(shù)ulp命令，相應(yīng)的文件應(yīng)該就打包好并生成在了dist目錄下。然后我們在src/*.html中加入對這些生成好的js文件的引入：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Main</title></head><body> <div id="app"></div> <script src="../dist/main.js"></script></body></html>
用瀏覽器打開src/main.html這時頁面已經(jīng)可以正常工作了
監(jiān)聽更加簡單，只要在剛才webpack(opt)的參數(shù)中加入watch: true就可以了。
.pipe(webpack({ module: { loaders: [ { test: /\.vue$/, loader: 'vue'} ] }, watch: true}))當(dāng)然最好把打包和監(jiān)聽設(shè)計成兩個任務(wù)，分別起名為bundle和watch：
gulp.task('bundle', function() { return gulp.src(mapFiles(appList, 'js')) .pipe(named()) .pipe(webpack(getConfig())) .pipe(gulp.dest('dist/'))})gulp.task('watch', function() { return gulp.src(mapFiles(appList, 'js')) .pipe(named()) .pipe(webpack(getConfig({watch: true}))) .pipe(gulp.dest('dist/'))})/** * @private */function getConfig(opt) { var config = { module: { loaders: [ { test: /\.vue$/, loader: 'vue'} ] } } if (!opt) { return config } for (var i in opt) { config[i] = opt } return config}現(xiàn)在你可以不必每次修改文件之后都運行g(shù)ulp bundle才能看到最新的效果，每次改動之后直接刷新瀏覽器即可。
打包好的代碼已經(jīng)不那么易讀了，直接在這樣的代碼上調(diào)試還是不那么方便的。這個時候，webpack + vue 有另外一個現(xiàn)成的東西：source map 支持。為 webpack 加入這個配置字段devtool: 'source-map'：
var config = { module: { loaders: [ { test: /.vue$/, loader: 'vue'} ] }, devtool: 'source-map' }
再次運行g(shù)ulp bundle或gulp watch試試看，是不是開發(fā)者工具里 debug 的時候，可以追蹤斷點到源代碼了呢：）
完整的 javascript 代碼如下：
var gulp = require('gulp')var webpack = require('gulp-webpack')var named = require('vinyl-named')var appList = ['main']gulp.task('default', ['bundle'], function() { console.log('done')})gulp.task('bundle', function() { return gulp.src(mapFiles(appList, 'js')) .pipe(named()) .pipe(webpack(getConfig())) .pipe(gulp.dest('dist/'))})gulp.task('watch', function() { return gulp.src(mapFiles(appList, 'js')) .pipe(named()) .pipe(webpack(getConfig({watch: true}))) .pipe(gulp.dest('dist/'))})/** * @private */function getConfig(opt) { var config = { module: { loaders: [ { test: /\.vue$/, loader: 'vue'} ] }, devtool: 'source-map' } if (!opt) { return config } for (var i in opt) { config[i] = opt } return config}/** * @private */function mapFiles(list, extname) { return list.map(function (app) {return 'src/' + app + '.' + extname})}做出一個 vue + webpack 的 generator，把這樣的項目體驗分享給更多的人。目前我基于團隊內(nèi)部在使用的輕量級腳手架工具寫了一份名叫just-vue的 generator，目前這個 generator 還在小范圍試用當(dāng)中，待比較成熟之后，再分享出來
其實上面提到的just-vue腳手架已經(jīng)遠(yuǎn)不止文章中介紹的東西了， 我們在業(yè)務(wù)落地的“最后一公里”做了更多的沉淀和積累，比如自動圖片上傳與畫質(zhì)處理、rem單位自動換算、服務(wù)端/客戶端/數(shù)據(jù)埋點接口的梳理與整合、自動化 htmlone 打包與 awp 發(fā)布等等。它們?yōu)橹С謽I(yè)務(wù)的開發(fā)者提供了更簡單高效的工作體驗。 篇幅有限，更多內(nèi)容我也希望將來有機會再多分享出來。
最后再次希望大家如果有興趣的話可以來玩一下，無線前端組內(nèi)的同學(xué)我都愿意提供一對一入門指導(dǎo)：）
Just Vue！
