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