序言
本人之前都是利用大牛們提供配置好的項目,然后在本地配置npm install,最后運行npm run dev，在這些項目基礎(chǔ)上去開發(fā)新項目；就算不利用大牛的配置項目，都是全局安裝了vue腳手架，webpack,然后npm init webpack project，就可以新建一個大部分插件，命令行配置和封裝好的項目，就可以npm install，npm run dev運行項目開始開發(fā)，在開發(fā)中用到啥就配置啥。。。
可是我對項目里面webpack封裝和配置好多東西都不清楚，因為沒有深入去了解；所以我想一步步弄清楚里面的配置信息，我打算自己一步步來配置安裝搭建整個項目起來；無意中在討論群上看到分享的電子檔vue.js實戰(zhàn)，是尤雨溪老師作推薦序，·梁灝老師編著；這本書籍值得推薦大家看看，特別對于我這種初學(xué)者更適合；看了梁灝老師這書籍，特別是webpack配置這章節(jié)，我按著步驟學(xué)著并上手實踐，下面的內(nèi)容就是我一步步安裝配置搭建后的項目流程的一些總結(jié)與感想還有梁灝老師寫的書籍里面需要注意的知識點我也記錄下來，整理成文章，目的是有利于往后自己遺忘可以查找并同時分享給大家，希望可以幫助對于webpack+vue項目搭建的一些配置信息和步驟不太清楚的小伙伴們；若文章有寫的不好，或者有理解分析錯誤的點，請大家體諒并糾正，謝謝！
1)新建空目錄newDemo，使用npm初始化配置npm init
說明：配置后項目里面就多了package.json文件
2)安裝webpack，輸入命令行npm install webpack --save-dev
安裝好后package.json多了一行webpack指令
3）安裝熱更新，輸入cnpm install webpack-dev-server --save-dev
說明：這里和往后內(nèi)容使用
cnpm是因為我本地安裝淘寶鏡像，用cnpm配置安裝命令行更快
安裝好后package.json多了一行webpack-dev-server指令
4）新建webpack.config,js基本配置文件，在配置文件里進行初始化
5）在package.json配置dev指令
說明：配置好這條指令后就可以在命令板中輸入npm run dev運行項目；在瀏覽器顯示的地址是默認的 :8080/；如果不想要默認，可以改端口為：在package.json文件的scripts改dev為："webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
6)在demo目錄下新建mainjs
在webpack.config.js配置以下內(nèi)容：入口配置和出口配置
需要特別注意：dirname前面是有兩橫（我就設(shè)置了一條橫線，導(dǎo)致報錯，看似小問題，可這坑不小，因為沒留意，都找不到這bug）
6)繼續(xù)在項目中新建一個index.html
在index.html中設(shè)置以下內(nèi)容：（需要把main.js入口文件引入index.html文件中）
輸入npm run dev運行項目，下面顯示命令行是成功調(diào)用：
調(diào)用成功后自動打開瀏覽器顯示頁面內(nèi)容：端口默認為8080
7)為了測試命令行配置成功和webpack-dev-server的熱更新功能成效；
在main.js文件里修改index.html文件里面的內(nèi)容，再運行項目看看瀏覽器顯示內(nèi)容的變化情況：
因為配置webpack-dev-server的熱更新功能，修改后瀏覽器會自動更新修改后的內(nèi)容：（說明前面的命令行配置成功）
溫馨提示：每次修改項目，并沒有刷新瀏覽器，就已經(jīng)自動更新；這就是webpack-dev-serverd 熱更新功能,它是通過建立一個webSocket（H5）連接來實時響應(yīng)代碼的修改，webSocket是客戶端與瀏覽器雙向響應(yīng)
可以按f12，在瀏覽器的調(diào)試模式里查看到websocket
8)繼續(xù)配置webpack --progress --hide-modules
說明：生成目錄dist中的main.js，這是個打包過程
已經(jīng)生成dist目錄的mainjs打包文件
9）若用到一些css樣式，就需要用到style-loader和css-loader
配置css-loader命令行
配置style-loader命令行
配置css-loader/style-loader命令行后，在webpack.config.js配置文件里配置loader，增加對.css文件的處理
溫馨提示：在配置文件中的module對象的rules屬性中可以指定一系列的loaders，每個loader都必須包含test和use兩個選項，意思是當(dāng)webpack編譯過程遇到require或import語句導(dǎo)入一個為.css文件，將它通過css-loader轉(zhuǎn)換，再通過style-loader轉(zhuǎn)換，然后繼續(xù)打包；use選項的值可以是數(shù)組或字符串，如果是數(shù)組，它的編譯順序就是從后往前；
示例：
在項目目錄下新建一個style.css文件
然后在main.js入口文件里面用import引入：
瀏覽器自動更新內(nèi)容的字體樣式（啟動熱更新功能）
此時可以在瀏覽器可以看到css是通過js動態(tài)創(chuàng)建<style>標簽來寫入的
注意：上面用的方法，實際業(yè)務(wù)中，一般不用，因為項目大了樣式會很多，都放在js里太占體積，不能做緩存；所以一般會用到extract-text-webpack-plugin 的插件來把散落在各地的css提取出來，并生成一個main.css的文件，最終在index.html里通過<link>的形式加載它：
10)配置extract-text-webpack-plugin插件
配置插件后在package.json中有顯示配置后的extract-text-webpack-plugin命令行
配置好插件后也需要修改webpack.config.js配置文件為以下內(nèi)容：
最后在index.html中引入main.css文件（.vue為后綴的文件中的style樣式都統(tǒng)一打包在main.css文件中）
11)需要用到.vue為后綴的文件，則需要在webpack中使用vue-loader就可以對.vue格式的文件進行處理
需要配置以下的所有命令:例如需要用到.vue文件需要先安裝vue-loader、vue-style-loader等加載器并做配置；要使用es6語法，需要安裝babel和babel-loader等加載器（注意一條都不能配置漏，不然出現(xiàn)報錯可能影響往后的運行與配置）：
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
配置好以上的命令行，package.json添加這些命令行
配置以上命令行后，在webpack.config.js配置文件中設(shè)置以下內(nèi)容：
說明：vue-loader在編譯.vue文件時，會對<template>、<script>、<style>分別處理，所以在vue-loader選項里多了一項options來進一步對不同語言進行配置，如在對css處理時，會先通過css-loader解析，然后把處理結(jié)果再交給vue-style-loader處理
12）在demo目錄下新建.babelrc文件，并寫配置內(nèi)容，webpack會依賴配置文件用babel編譯es6代碼
說明提示：配置好以上的這些命令后，就可以使用.vue后綴文件進行開發(fā)了，現(xiàn)在每個.vue文件就代表一個組件，組件之間可以相互依賴
13）因為配置以上命令行，可以使用.vue后綴文件,新建app.vue文件，并且設(shè)置內(nèi)容為以下：
把app.vue引入入口文件main.js：
瀏覽器自動更新顯示：
在瀏覽器的調(diào)試模式中會看到div標簽中出現(xiàn)屬性data-v-xxx ，那是因為使用了<style scoped>，樣式只作用本組件中；如果去掉scoped，div標簽就沒有data-v-屬性，只是單純的普通標簽<div>文本數(shù)據(jù)</div>
14）在demo目錄新建component文件夾放title.vue和button.vue文件
然后把這兩個組件導(dǎo)入app.vue根組件中
15）配置url-loader和file-loader來支持圖片、字體等文件
npm install --save-dev url-loader
npm install --save-dev file-loader
配置后需要在webpack.config.js文件中配置test/loader
補充說明：?limit=1024表示的作用是：
當(dāng)遇到.gif、.png、.ttf等格式文件時，url-loader會把它們一起編譯到dist目錄下，“？limit=1024”是指如果這個文件小于1kb，就以base64的形式加載，不會生成一個文件
示例：
新建一個image文件夾放圖片
在app.vue根組件里面加入img標簽
瀏覽器自動更新顯示
16）項目打包，需要配置兩個打包依賴：
npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin
配置后在目錄新建webpack.prod.config.js生產(chǎn)環(huán)境的配置文件（該文件在基本配置文件的基礎(chǔ)上擴展）
webpack.prod.config.js文件設(shè)置以下內(nèi)容：
var webpack=require('webpack');
var HtmlwebpackPlugin=require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var merge=require('webpack-merge');
var webpackBaseConfig=require('./webpack.config.js');
//清空基本配置的插件列表
webpackBaseConfig.plugins=[];
module.exports=merge(webpackBaseConfig,{
output:{
publicPath:'/dist/',
// 將入口文件重命名為帶有20位hash值的唯一文件
filename:'[name].[hash].js'
},
plugins:[
new ExtractTextPlugin({
// 提取css，并重命名為帶有20位hash值的唯一文件
filename:'[name].[hash].css',
allChunks:true
}),
// 定義當(dāng)前node環(huán)境為生產(chǎn)環(huán)境
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
}),
// 壓縮js
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
// 提取模板，并保存入口html文件
new HtmlwebpackPlugin({
filename:'../index_prod.html',
template:'./index.ejs',
inject:false
})
]
});
配置打包依賴后在package.json文件里加入build的快捷腳本打包
"scripts":{
.......
“build“:"webpack --progress --hide-modules --config webpack.prod.config.js"
}
補充說明：上面安裝的webpack-merge模塊就是用于合并兩個webpack的配置文件，所以prod的配置是在webpack.config.js基礎(chǔ)上擴展的；靜態(tài)資源在大部分場景下都有緩存（304），更新上線后一般都希望用戶能及時地看到內(nèi)容，所以給打包后的css和js文件的名稱都加了20位的hash值，這樣文件名就唯一了，只要不對html文件設(shè)置緩存，上線后立即就可以加載最新的靜態(tài)資源。
html-webpack-plugin是用來生成html文件的，它通過template選項來讀取指定的模板index.ejs，然后輸出到filename指定的目錄，也就是demo/index_prod.html，模板index.ejs動態(tài)設(shè)置了靜態(tài)資源的路徑和文件名。
17)新建一個index.ejs,設(shè)置下面的內(nèi)容
補充說明：ejs是一個javascript模板庫，用來從json數(shù)據(jù)中生成html字符串，常用于node.js
18)運行npm run build，成功打包
npm run build 打包后的靜態(tài)資源main.css/main.js/jpg（css文件，js文件，圖片）
附上github（配置后的項目demo）：
http://www.lxweimin.com/u/3908e601f4ec
。。。終于完結(jié)，感覺碼了好久（感謝大家閱讀完到這里），以上的內(nèi)容有不對或者不好地方，歡迎指出，往后還會更新有關(guān)vue-router和vuex的文章，希望分享的文章對大家有幫助！
本文作者lilyping
越努力，越幸運
原文鏈接：http://www.lxweimin.com/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping
