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