vue.png

序言

本人之前都是利用大牛們提供配置好的項(xiàng)目,然后在本地配置npm install,最后運(yùn)行npm run dev法焰，在這些項(xiàng)目基礎(chǔ)上去開發(fā)新項(xiàng)目秧荆；就算不利用大牛的配置項(xiàng)目，都是全局安裝了vue腳手架埃仪，webpack,然后npm init webpack project乙濒，就可以新建一個(gè)大部分插件，命令行配置和封裝好的項(xiàng)目卵蛉，就可以npm install颁股，npm run dev運(yùn)行項(xiàng)目開始開發(fā)，在開發(fā)中用到啥就配置啥傻丝。甘有。。

可是我對(duì)項(xiàng)目里面webpack封裝和配置好多東西都不清楚桑滩，因?yàn)闆]有深入去了解梧疲；所以我想一步步弄清楚里面的配置信息，我打算自己一步步來配置安裝搭建整個(gè)項(xiàng)目起來运准；無意中在討論群上看到分享的電子檔vue.js實(shí)戰(zhàn)幌氮，是尤雨溪老師作推薦序，·梁灝老師編著胁澳；這本書籍值得推薦大家看看该互，特別對(duì)于我這種初學(xué)者更適合；看了梁灝老師這書籍韭畸，特別是webpack配置這章節(jié)宇智，我按著步驟學(xué)著并上手實(shí)踐，下面的內(nèi)容就是我一步步安裝配置搭建后的項(xiàng)目流程的一些總結(jié)與感想還有梁灝老師寫的書籍里面需要注意的知識(shí)點(diǎn)我也記錄下來胰丁，整理成文章随橘，目的是有利于往后自己遺忘可以查找并同時(shí)分享給大家，希望可以幫助對(duì)于webpack+vue項(xiàng)目搭建的一些配置信息和步驟不太清楚的小伙伴們锦庸；若文章有寫的不好机蔗，或者有理解分析錯(cuò)誤的點(diǎn)，請(qǐng)大家體諒并糾正，謝謝萝嘁！

1)新建空目錄newDemo梆掸，使用npm初始化配置npm init

vw.png

說明：配置后項(xiàng)目里面就多了package.json文件

2)安裝webpack，輸入命令行npm install webpack --save-dev

vw2.png

安裝好后package.json多了一行webpack指令

vw3.png

3）安裝熱更新牙言，輸入cnpm install webpack-dev-server --save-dev

vw4.png

說明：這里和往后內(nèi)容使用
cnpm是因?yàn)槲冶镜匕惭b淘寶鏡像酸钦，用cnpm配置安裝命令行更快

安裝好后package.json多了一行webpack-dev-server指令

vw5.png

4）新建webpack.config,js基本配置文件条霜，在配置文件里進(jìn)行初始化

vw6.png

5）在package.json配置dev指令

vw7.png

說明：配置好這條指令后就可以在命令板中輸入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)容：入口配置和出口配置

vw9png.png

需要特別注意：dirname前面是有兩橫（我就設(shè)置了一條橫線灵巧，導(dǎo)致報(bào)錯(cuò)晕窑，看似小問題话侄，可這坑不小闹获，因?yàn)闆]留意基括，都找不到這bug）

vw10.png

6)繼續(xù)在項(xiàng)目中新建一個(gè)index.html

在index.html中設(shè)置以下內(nèi)容：（需要把main.js入口文件引入index.html文件中）

vw11.png

輸入npm run dev運(yùn)行項(xiàng)目颜懊，下面顯示命令行是成功調(diào)用：

vw12.png

調(diào)用成功后自動(dòng)打開瀏覽器顯示頁面內(nèi)容：端口默認(rèn)為8080

vw13.png

7)為了測(cè)試命令行配置成功和webpack-dev-server的熱更新功能成效；

在main.js文件里修改index.html文件里面的內(nèi)容风皿，再運(yùn)行項(xiàng)目看看瀏覽器顯示內(nèi)容的變化情況：

vw14.png

因?yàn)榕渲脀ebpack-dev-server的熱更新功能河爹，修改后瀏覽器會(huì)自動(dòng)更新修改后的內(nèi)容：（說明前面的命令行配置成功）

vw15.png

溫馨提示：每次修改項(xiàng)目，并沒有刷新瀏覽器桐款，就已經(jīng)自動(dòng)更新咸这；這就是webpack-dev-serverd 熱更新功能,它是通過建立一個(gè)webSocket（H5）連接來實(shí)時(shí)響應(yīng)代碼的修改，webSocket是客戶端與瀏覽器雙向響應(yīng)

可以按f12魔眨，在瀏覽器的調(diào)試模式里查看到websocket

vw16.png

8)繼續(xù)配置webpack --progress --hide-modules

說明：生成目錄dist中的main.js媳维，這是個(gè)打包過程

vw17.png

已經(jīng)生成dist目錄的mainjs打包文件

vw18.png

9）若用到一些css樣式，就需要用到style-loader和css-loader

配置css-loader命令行

vw19.png

配置style-loader命令行

vw20.png

配置css-loader/style-loader命令行后遏暴，在webpack.config.js配置文件里配置loader侄刽，增加對(duì).css文件的處理

vw21.png

溫馨提示：在配置文件中的module對(duì)象的rules屬性中可以指定一系列的loaders，每個(gè)loader都必須包含test和use兩個(gè)選項(xiàng)朋凉，意思是當(dāng)webpack編譯過程遇到require或import語句導(dǎo)入一個(gè)為.css文件州丹，將它通過css-loader轉(zhuǎn)換，再通過style-loader轉(zhuǎn)換杂彭，然后繼續(xù)打包墓毒；use選項(xiàng)的值可以是數(shù)組或字符串，如果是數(shù)組亲怠，它的編譯順序就是從后往前所计；

示例：

在項(xiàng)目目錄下新建一個(gè)style.css文件

vw22.png

然后在main.js入口文件里面用import引入：

vw23.png

瀏覽器自動(dòng)更新內(nèi)容的字體樣式（啟動(dòng)熱更新功能）

vw24.png

此時(shí)可以在瀏覽器可以看到css是通過js動(dòng)態(tài)創(chuàng)建<style>標(biāo)簽來寫入的

vw25.png

注意：上面用的方法，實(shí)際業(yè)務(wù)中团秽，一般不用主胧，因?yàn)轫?xiàng)目大了樣式會(huì)很多钾腺，都放在js里太占體積，不能做緩存讥裤；所以一般會(huì)用到extract-text-webpack-plugin 的插件來把散落在各地的css提取出來，并生成一個(gè)main.css的文件姻报，最終在index.html里通過<link>的形式加載它：

10)配置extract-text-webpack-plugin插件

vw26.png

配置插件后在package.json中有顯示配置后的extract-text-webpack-plugin命令行

vw27.png

配置好插件后也需要修改webpack.config.js配置文件為以下內(nèi)容：

vw28.png

最后在index.html中引入main.css文件（.vue為后綴的文件中的style樣式都統(tǒng)一打包在main.css文件中）

vw29.png

11)需要用到.vue為后綴的文件己英，則需要在webpack中使用vue-loader就可以對(duì).vue格式的文件進(jìn)行處理

需要配置以下的所有命令:例如需要用到.vue文件需要先安裝vue-loader、vue-style-loader等加載器并做配置吴旋；要使用es6語法损肛，需要安裝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添加這些命令行

vw30.png

配置以上命令行后治拿，在webpack.config.js配置文件中設(shè)置以下內(nèi)容：

vw31.png

說明：vue-loader在編譯.vue文件時(shí)，會(huì)對(duì)<template>笆焰、<script>劫谅、<style>分別處理，所以在vue-loader選項(xiàng)里多了一項(xiàng)options來進(jìn)一步對(duì)不同語言進(jìn)行配置嚷掠，如在對(duì)css處理時(shí)捏检，會(huì)先通過css-loader解析，然后把處理結(jié)果再交給vue-style-loader處理

12）在demo目錄下新建.babelrc文件不皆，并寫配置內(nèi)容贯城，webpack會(huì)依賴配置文件用babel編譯es6代碼

vw32.png

說明提示：配置好以上的這些命令后，就可以使用.vue后綴文件進(jìn)行開發(fā)了霹娄，現(xiàn)在每個(gè).vue文件就代表一個(gè)組件能犯，組件之間可以相互依賴

13）因?yàn)榕渲靡陨厦钚校梢允褂?vue后綴文件,新建app.vue文件犬耻，并且設(shè)置內(nèi)容為以下：

vw33.png

把a(bǔ)pp.vue引入入口文件main.js：

vw34.png

瀏覽器自動(dòng)更新顯示：

vw35.png

在瀏覽器的調(diào)試模式中會(huì)看到div標(biāo)簽中出現(xiàn)屬性data-v-xxx 踩晶，那是因?yàn)槭褂昧?lt;style scoped>，樣式只作用本組件中香追；如果去掉scoped合瓢，div標(biāo)簽就沒有data-v-屬性，只是單純的普通標(biāo)簽<div>文本數(shù)據(jù)</div>

vw36.png

14）在demo目錄新建component文件夾放title.vue和button.vue文件

vw50.png

然后把這兩個(gè)組件導(dǎo)入app.vue根組件中

vw51.png

15）配置url-loader和file-loader來支持圖片透典、字體等文件

npm install --save-dev url-loader
npm install --save-dev file-loader

配置后需要在webpack.config.js文件中配置test/loader

vw52.png

補(bǔ)充說明：?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)簽

vw53.png

瀏覽器自動(dòng)更新顯示

vw54.png

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"
}

vw55.png

補(bǔ)充說明：上面安裝的webpack-merge模塊就是用于合并兩個(gè)webpack的配置文件遗增，所以prod的配置是在webpack.config.js基礎(chǔ)上擴(kuò)展的；靜態(tài)資源在大部分場景下都有緩存（304）款青，更新上線后一般都希望用戶能及時(shí)地看到內(nèi)容做修，所以給打包后的css和js文件的名稱都加了20位的hash值，這樣文件名就唯一了抡草，只要不對(duì)html文件設(shè)置緩存饰及，上線后立即就可以加載最新的靜態(tài)資源。

html-webpack-plugin是用來生成html文件的康震，它通過template選項(xiàng)來讀取指定的模板index.ejs燎含，然后輸出到filename指定的目錄，也就是demo/index_prod.html腿短，模板index.ejs動(dòng)態(tài)設(shè)置了靜態(tài)資源的路徑和文件名屏箍。

17)新建一個(gè)index.ejs,設(shè)置下面的內(nèi)容

vw56.png

補(bǔ)充說明：ejs是一個(gè)javascript模板庫，用來從json數(shù)據(jù)中生成html字符串橘忱，常用于node.js

18)運(yùn)行npm run build铣除，成功打包

vw60.png

npm run build 打包后的靜態(tài)資源main.css/main.js/jpg（css文件，js文件鹦付，圖片）

vw61.png

附上github（配置后的項(xiàng)目demo）：
http://www.reibang.com/u/3908e601f4ec

尚粘。。敲长。終于完結(jié)郎嫁，感覺碼了好久（感謝大家閱讀完到這里），以上的內(nèi)容有不對(duì)或者不好地方祈噪，歡迎指出泽铛，往后還會(huì)更新有關(guān)vue-router和vuex的文章，希望分享的文章對(duì)大家有幫助辑鲤！

min.png

本文作者lilyping
越努力盔腔，越幸運(yùn)
原文鏈接：http://www.reibang.com/u/3908e601f4ec
微信公眾號(hào)：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping