本文首發(fā)于TalkingCoder，一個有逼格的程序員社區(qū)。轉(zhuǎn)載請注明出處和作者。
寫在前面
本文為系列文章，總共分四節(jié)：
《Vue+Webpack開發(fā)可復(fù)用的單頁面富應(yīng)用教程（配置篇）》
《Vue+Webpack開發(fā)可復(fù)用的單頁面富應(yīng)用教程（組件篇）》
《Vue+Webpack開發(fā)可復(fù)用的單頁面富應(yīng)用教程（技巧篇）》
7月16日在斗魚直播了一場關(guān)于Vue+Webpack的技術(shù)分享，對基于vue的組件化開發(fā)有了一個初步的在線demo演示，點(diǎn)擊查看直播錄像。本文則會在此基礎(chǔ)上，對Webpack的安裝和基礎(chǔ)配置進(jìn)行較全面的講解。
本系列文章所講解內(nèi)容，依賴于https://github.com/icarusion/vue-vueRouter-webpack這套架構(gòu)，開發(fā)者可以前往進(jìn)行clone或下載（記得star哦）。在使用中有疑問或更好的優(yōu)化方案，可在https://github.com/icarusion/vue-vueRouter-webpack/issues這里提交。
關(guān)于vue+vueRouter+webpack
本項目可以幫你快速搭建一個基于Vue的單頁面富應(yīng)用，目前已將開發(fā)環(huán)境和生產(chǎn)環(huán)境進(jìn)行單獨(dú)配置（webpack.dev.config.js和webpack.prod.config.js），當(dāng)然也可根據(jù)需要自行添加灰度配置文件。目前的開發(fā)環(huán)境文件名使用默認(rèn)命名（比如1.chunk.js），生產(chǎn)環(huán)境使用帶hash值的命名（比如1.0891dcfed66cf89e6e98.chunk.js）,可根據(jù)自己需要修改,但不建議修改本地環(huán)境為帶hash的。 入口的html文件由webpack生成，模板在src/template/index.html內(nèi),可自行修改。默認(rèn)已將dist目錄、生成的兩個index文件加入忽略列表，使用者可根據(jù)自己項目來修改。
本項目默認(rèn)將組件（components）、路由（routers）、自定義過濾器（filters）、自定義指令（directives）等單獨(dú)拆成目錄。在數(shù)據(jù)獲取方面用戶可以根據(jù)自己需要使用vue-resource或者jQuery等，如果是大型項目，還可以使用vuex來維護(hù)狀態(tài)和數(shù)據(jù)。當(dāng)然，這并不意味著本項目是最佳實踐，所有的目錄結(jié)構(gòu)和webpack配置都可以根據(jù)自己需要來修改。
先把項目跑起來
準(zhǔn)備工作
全局安裝webpack和webpack-dev-server
npm install webpack -g
npm install webpack-dev-server -g
安裝成功后，再安裝所有依賴
npm install
運(yùn)行
開發(fā)環(huán)境：
首次運(yùn)行需要執(zhí)行init命令生成html入口文件，以后不用再執(zhí)行
npm run init
然后執(zhí)行dev，本地環(huán)境就可以跑起來了，默認(rèn)端口是8080，如果有沖突請先kill
npm run dev
在瀏覽器訪問http://127.0.0.1:8080，如果現(xiàn)實下圖就說明已經(jīng)成功了：
生產(chǎn)環(huán)境：
直接執(zhí)行build方法即可編譯打包：
npm run build
生產(chǎn)環(huán)境默認(rèn)使用hash模式的路由，開發(fā)環(huán)境是History模式。直接打開index_prod.html即可訪問生產(chǎn)環(huán)境。
Webpack配置詳解
webpack.base.config.js為開發(fā)和生產(chǎn)環(huán)境通用的配置，webpack.dev.config.js和webpack.prod.config.js分別是開發(fā)和生產(chǎn)環(huán)境的單獨(dú)配置。下面一一介紹每個配置的作用。
entry: {? ? main:'./src/main',????vendors: ['vue','vue-router']}
entry是入口的配置項，這里我們使用數(shù)組來定義了兩個入口，main是我們的主入口，主要是引入vue-router路由和app.vue入口組件。其中app.vue提供了路由的掛載元素，以及通用的組件，比如header和footer什么的。其實vue的路由也是組件了，跟普通的組件并沒有什么特殊。
output: {? ? path: path.join(__dirname,'./dist'),????publicPath:'/dist/',????filename:'[name].js',????chunkFilename:'[name].[hash].js'}
output是輸出配置，在本項目中將其分發(fā)到了不同的環(huán)境里。path是文件輸出到本地的路徑，publicPath是文件的引用路徑，比如開發(fā)環(huán)境可將其配置為cdn路徑，filename是主入口的文件名，chunkFilename是每個路由編譯后的文件名，其中[hash]是用來唯一標(biāo)識文件，主要用來防止緩存。
module: {? ? loaders: [? ? ? ? { test:/\.vue$/, loader:'vue'},? ? ? ? { test:/\.js$/, loader:'babel', exclude:/node_modules/},? ? ? ? { test:/\.css$/, loader:'style!css!autoprefixer'},? ? ? ? { test:/\.scss$/, loader:'style!css!sass?sourceMap'},? ? ? ? { test:/\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader:'url-loader?limit=8192'},? ? ? ? { test:/\.(html|tpl)$/, loader:'html-loader'}? ? ]}
loaders就是webpack最強(qiáng)大的地方了，不同的loaders通過正則來對不同模塊文件進(jìn)行處理，比如我們的vue-loader來處理.vue格式的模塊。需要特殊說明的是url-loader，它會將小于8kb的圖片、iconfont字體都轉(zhuǎn)為base64，超過8kb的才會生成具體文件，當(dāng)然這個參數(shù)我們也是可以配置的。另外需要說明的就是webpack編譯完，最終我們需要的其實就是一個入口html和一個dist文件夾，所有的css、js、圖片、iconfont字體以及入口js都會重命名后存在dist里，這也是為什么webpack特別擅長做SPA。
下面的配置就是單獨(dú)對不同的loader的設(shè)置，比如vue的可以提取寫在里的css為單獨(dú)的css文件，webpack默認(rèn)是以js方式動態(tài)創(chuàng)建style標(biāo)簽或link標(biāo)簽的形式引入css的，這樣做css也是可以按需加載了，但其實項目中我們還是喜歡把css獨(dú)立出來，所以需要單獨(dú)配置，下文也有具體說明。
babel很熟悉了吧，就是將ES6轉(zhuǎn)ES5。
resolve.extensions是對模塊后綴名的簡寫，配置后，原本是require('./components/app.vue') 可以簡寫為require('./components/app')。
resolve.alias是別名，配置后，比如原本是require('moment/min/moment-with-locales.min.js') 可以簡寫為require('moment')。
plugins是一些插件，webpack本身也自帶了很多插件。在本項目中，我們在開發(fā)和生產(chǎn)環(huán)境中使用了不同的插件：
newExtractTextPlugin("[name].css",{ allChunks :true,resolve : ['modules'] })// 開發(fā)newExtractTextPlugin("[name].[hash].css",{ allChunks :true,resolve : ['modules'] })// 生產(chǎn)
這兩個插件就是用來提取css的，目前只能提取使用@import形式和.vue里面style內(nèi)的css。
newwebpack.optimize.CommonsChunkPlugin('vendors','vendors.js')// 開發(fā)newwebpack.optimize.CommonsChunkPlugin('vendors','vendors.[hash].js')// 生產(chǎn)
這兩個插件是提取js公共組件的，比如vue,vue-router,jquery,echarts等，我們可以在入口的vendors里進(jìn)行配置。
// 開發(fā)newHtmlWebpackPlugin({? ? filename:'../index.html',? ? template:'./src/template/index.html',? ? inject:'body'})// 生產(chǎn)newHtmlWebpackPlugin({? ? filename:'../index_prod.html',? ? template:'./src/template/index.html',? ? inject:'body'})
這兩個插件依賴html-webpack-plugin，是用來生產(chǎn)html的，其中filename是生產(chǎn)的文件路徑和名稱，template是使用的模板，inject是指將js放在body還是head里。生成的index.html是開發(fā)環(huán)境用的，index_prod.html是生產(chǎn)環(huán)境用的，生產(chǎn)環(huán)境里引用的css和js都是使用hash命名的，而且進(jìn)行了壓縮。
// 生產(chǎn)newwebpack.optimize.UglifyJsPlugin({? ? compress: {? ? ? ? warnings:false}})
這個插件在生產(chǎn)時使用，是將代碼進(jìn)行壓縮。
// 開發(fā)fs.open('./src/config/env.js','w',function(err, fd){varbuf ='module.exports = "development";';? ? fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){});});// 生產(chǎn)fs.open('./src/config/env.js','w',function(err, fd){varbuf ='module.exports = "production";';? ? fs.write(fd,buf,0,buf.length,0,function(err,written,buffer){});});
這兩個跟webpack無關(guān)了，主要是在編譯前用node生成一個env.js的文件用來標(biāo)明當(dāng)前是開發(fā)還是生產(chǎn)環(huán)境。這樣我們在一些config.js可以通過它來配置ajax的API地址和參數(shù)等等。
webpack的配置就是這些，基本已經(jīng)滿足我們開發(fā)大型項目的需求了，當(dāng)然這只是一些最基本的配置，如果你使用babel可以進(jìn)一步對其進(jìn)行配置，使用單元測試可以再配置Karma等等。
在下一篇中，我講重點(diǎn)介紹關(guān)于vue組件化的一些內(nèi)容。
