webpack是時(shí)下十分流行的編譯和打包工具，它提供一種可擴(kuò)展的loader的方式慈参，簡(jiǎn)單的配置，便可以編譯打包各類型的文件刮萌，包括js驮配、css、image着茸、font壮锻、html，以及各種預(yù)編譯語(yǔ)言都不在話下涮阔。
一猜绣、回顧與思考
在上一節(jié)的【入門：十分鐘自動(dòng)化構(gòu)建】中我們講解了如何用gulp去搭建一個(gè)工作流。我們認(rèn)識(shí)到gulp是一個(gè)流程管理工具敬特，以單個(gè)任務(wù)為基礎(chǔ)單元掰邢，組合成為一套完整的工作流，而且gulp還有很多的以gulp-*格式命名的工作模塊伟阔，用來(lái)處理各種資源文件辣之，如果沒(méi)有看過(guò)上一節(jié)內(nèi)容的同學(xué)，建議先回去看過(guò)皱炉，再往下閱讀怀估，因?yàn)楸竟?jié)內(nèi)容是跟上一節(jié)的知識(shí)點(diǎn)緊密聯(lián)系的。
這一節(jié)我們會(huì)講解如何構(gòu)建具備版本管理能力的項(xiàng)目合搅，什么是版本管理能力多搀？不是什么svn或者branch，我們看這樣一個(gè)場(chǎng)景來(lái)幫助理解：
你用上次搭建的工作流開發(fā)了一個(gè)網(wǎng)站灾部，然后上線康铭。
第二天打開發(fā)現(xiàn)有bug，心想尼瑪趕緊趁著老板沒(méi)發(fā)現(xiàn)修復(fù)一下赌髓。
改完代碼从藤，打包，發(fā)布春弥，一氣呵成呛哟，完美。
然而十分鐘以后老板讓你去一趟辦公室匿沛，打開頁(yè)面跟你說(shuō)有個(gè)bug扫责。
心里一抽，一看逃呼！我勒個(gè)去鳖孤，這坑爹的緩存啊者娱。。苏揣。
怎么去解決這個(gè)緩存黄鳍？，或者說(shuō)平匈，怎么保證我上線一個(gè)新版本框沟，可以完完全全地替代舊版本？這就是版本管理增炭。
這問(wèn)題有很多解決方法忍燥，包括手動(dòng)打個(gè)戳啊什么的，像src="a.jpg?201608062315"隙姿，這確實(shí)可以解決梅垄，但是如果一次更新的東西很多，你壓根改不過(guò)來(lái)输玷。
gulp能幫我們做這事嗎队丝？可以，麻煩欲鹏，有興趣的同學(xué)可以自行搜索資料机久。有沒(méi)有簡(jiǎn)單點(diǎn)的套路？有的貌虾，webpack天然支持這一功能吞加。接下來(lái)我們就介紹如何用webpack來(lái)搭建這么一套工作流裙犹。
二尽狠、webpack
webpack的用法，我們簡(jiǎn)單介紹一下叶圃。跟gulp一樣袄膏，webpack也是寫好配置文件才能開始工作。
全局安裝webpack
npm install webpack -g
記得養(yǎng)成好習(xí)慣掺冠，也本地安裝一下哦
npm install webpack --save-dev
順帶我們把接下來(lái)要用到的幾個(gè)loader一起安裝了：
npm install style-loader css-loader sass-loader swig-loader --save-dev
這里的*-loader作用跟gulp-*差不多沉馆，就是一些編譯用的模塊。
緊接著我們?cè)诟夸浵碌抡福陆ㄒ粋€(gè)webpack.config.js配置文件斥黑，我們直接來(lái)看代碼：
var path = require('path')
module.exports = {
entry: {
Index: ['./src/js/index.js']
},
output: {
path: path.resolve(__dirname, './dist/static'),
publicPath: 'static/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.scss', '.swig']
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.swig$/,
loader: 'swig'
}
]
}
}
這里大致分為四部分的內(nèi)容：
entry
入口文件，也就是一切工作的起點(diǎn)眉厨，你可以將整個(gè)web應(yīng)用都最終打包成一個(gè)js文件锌奴，那你只需要定義一個(gè)入口，而如果你希望對(duì)多個(gè)頁(yè)面獨(dú)立開來(lái)憾股，你需要定義多個(gè)入口鹿蜀，最終在不同的頁(yè)面引用不同的js箕慧。一個(gè)entry對(duì)應(yīng)生成一個(gè)bundle。
output
定義打包輸出的配置：
- path是打包文件的存放路徑茴恰，按上面的配置颠焦，意味著我們待會(huì)打包的文件是要放在
dist/static下的； - publicPath是定義文件被打包后的url前綴的往枣，效果是
<script src="index.js"></script>=><script src="static/index.js"></script>伐庭； - filename顧名思義，就是定義打包后的名字分冈，你可以按照上面的方式定義似忧，最終文件名與原來(lái)的保持一致，也可以在這個(gè)基礎(chǔ)上自己再拼接一些名詞丈秩，比如
[name].min.js盯捌，最終打包出來(lái)文件名就是index.min.js。
resolve
這個(gè)配置可有可無(wú)蘑秽，它是定義一些常用的文件拓展名饺著，被定義了的文件格式，在引用的時(shí)候可以不加擴(kuò)展名肠牲，比如我配置了.js的拓展名之后幼衰，在開發(fā)中我可以直接require('./common')，而不需要require('./common.js')缀雳。
module
最重要的一個(gè)部分渡嚣，我們?cè)谶@里定義針對(duì)各種類型文件的loader（加載器/編譯器），可以看到我們分別定義了css肥印、scss识椰、swig三種文件對(duì)應(yīng)的loader，多個(gè)loader之間用!隔開深碱，'-loader'可以省略不寫腹鹉。注意，編譯的優(yōu)先次序是從右到左的敷硅，比如scss文件是先被sass-loader處理功咒，然后再被css-loader處理，最后再被style-loader處理绞蹦。
除了這幾點(diǎn)力奋，webpack還有個(gè)比較重要的配置項(xiàng)plugins，這個(gè)我們暫時(shí)不介紹幽七，后面會(huì)在具體的應(yīng)用場(chǎng)景里引入景殷。除此之外，webpack的其他配置項(xiàng)大家可以去官網(wǎng)了解。
三滨彻、源碼
話不多說(shuō)藕届，我們還是取原來(lái)的gulp_base項(xiàng)目源碼來(lái)做介紹。
- project
|- src // 源文件夾
| |- tpl
| | `- index.swig
| |- sass
| | `- index.scss
| |- js
| | `- index.js
|- dist // 打包文件夾
`- package.json
webpack的模塊化使我們可以很方便地使用commonjs的規(guī)范來(lái)組織代碼亭饵。有關(guān)commonjs的內(nèi)容休偶，大家可以自行查閱相關(guān)文章，這里不作深入展開辜羊；或者關(guān)注我之后的文章踏兜，我將會(huì)針對(duì)模塊化做一些講解。不過(guò)這都是后話了八秃。
在這里我們只需要知道碱妆，我們通過(guò)將頁(yè)面劃分成很多的小模塊，每個(gè)模塊都是單獨(dú)的js文件昔驱，我們可以通過(guò)require的方式疹尾，去引入一個(gè)模塊，進(jìn)而組織成一個(gè)大的web應(yīng)用骤肛。而webpack更甚纳本，在webpack里，"一切資源皆模塊"腋颠，不管是圖片還是css繁成，都可以在js文件中直接require，當(dāng)然前提是你已經(jīng)在webpack.config.js的module項(xiàng)里配置了這類文件的相關(guān)loader淑玫。
四巾腕、編譯打包
ok，準(zhǔn)備就緒絮蒿，我們來(lái)試著編譯一下
webpack
理論上尊搬，我們?nèi)绻裫s文件放在一個(gè)叫做js的文件夾里，那幾乎百分百確定這貨就是.js結(jié)尾的歌径，擴(kuò)展名顯得有點(diǎn)多余毁嗦。當(dāng)然如果你硬是要在js文件夾里放個(gè).jpg的文件我也拿你沒(méi)辦法是吧亲茅。
咱們看看dist目錄里面是不是有了個(gè)static文件夾回铛？文件夾里是不是有個(gè)文件叫做index.js？是不是就成功了克锣？沒(méi)成功你找我茵肃。
好，我們?cè)囍?yàn)證另外一個(gè)配置袭祟，output.filename验残，我們改一下：
module.exports = {
output: {
path: path.resolve(__dirname, './dist/static'),
publicPath: 'static/',
filename: '[name].[chunkhash].js'
},
...
}
命令行里webpack一下：
Hash: 408544aa45e4f298cb49
Version: webpack 1.13.1
Time: 49ms
Asset Size Chunks Chunk Names
Index.e167a63b2bcf28077701.js 1.53 kB 0 [emitted] Index
[0] multi Index 28 bytes {0} [built]
[1] ./src/js/index.js 21 bytes {0} [built]
打開dist/static目錄一看，生成了一個(gè)Index.e167a63b2bcf28077701.js文件巾乳，chunkhash是由webpack對(duì)index.js這個(gè)文件進(jìn)行 md5 編碼之后得到的一個(gè)戳您没，這個(gè)戳是唯一的鸟召，拼接在文件名上，可以表示這個(gè)文件的唯一性氨鹏，只要index.js里面的內(nèi)容被修改一丁點(diǎn)欧募，這個(gè)生成的戳就會(huì)不一樣。
這不正是我們開頭想要的版本管理嗎仆抵？太美好了跟继，沒(méi)想到這么容易就解決了這個(gè)問(wèn)題。
有個(gè)問(wèn)題镣丑，如果我每修改一點(diǎn)舔糖，這個(gè)文件名就不一樣了，那我不就要在html中每個(gè)引用了這個(gè)js的地方再修改一下文件名莺匠？這根本就沒(méi)有減負(fù)嘛金吗！
怎么去解決這個(gè)問(wèn)題？webpack當(dāng)然提供了解決方案趣竣，如果我們用webpack幫我們打包html辽聊，并且自動(dòng)地去注入這些資源，那問(wèn)題就解決了期贫。
一般來(lái)說(shuō)webpack就只是處理入口文件跟匆，也就是從js去入手，這樣的話怎么都輪不到html通砍，那怎么樣才能讓webpack去處理一下html玛臂？答案就是我們之前提過(guò)的，plugins封孙！
我們來(lái)修改一下配置：
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
Index: ['./src/js/index.js']
},
output: {
path: path.resolve(__dirname, './dist/static'),
publicPath: 'static/',
filename: '[name].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.scss', '.swig']
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.swig$/,
loader: 'swig'
}
]
},
plugins: [
new HtmlWebpackPlugin({
chunks: ['Index'],
filename: '../index.html', // 留意這里迹冤，這里的路徑是相對(duì)來(lái)path配置的
template: './src/tpl/index',
inject: true
})
]
}
請(qǐng)留意兩點(diǎn)修改的地方，一個(gè)是var HtmlWebpackPlugin = require('html-webpack-plugin')虎忌，一個(gè)是plugins的配置內(nèi)容泡徙。
webpack允許以插件的方式去擴(kuò)展功能。html-webpack-plugin是webpack提供的一個(gè)簡(jiǎn)化html處理的插件膜蠢，其實(shí)本意就是為了解決這個(gè)引用bundle的問(wèn)題堪藐，順便提供一些像壓縮啊注入、變量啊什么的功能挑围。具體其他功能大家可以去官網(wǎng)看文檔礁竞。
使用前記得先install啊杉辙！
我們?cè)俅尉幾g一下模捂，然后查看一下dist文件夾，是不是多了個(gè)index.html？而且index.js也被編譯后自動(dòng)注入了頁(yè)面
編譯前：
// index.swig
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
hello, world!
</body>
</html>
編譯后：
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
hello, world!
<script type="text/javascript" src="static/Index.e167a63b2bcf28077701.js"></script></body>
</html>
done狂男！
看著這html综看，有沒(méi)有感覺(jué)少了點(diǎn)什么？嗯岖食，少了css寓搬，我們來(lái)看看css怎么注入。
其實(shí)css更簡(jiǎn)單县耽，我們已經(jīng)說(shuō)過(guò)了：
在webpack里句喷，一切資源皆模塊。
我們只需要在index.js中直接require就可以了：
// index.js
require('../sass/index')
console.log('index')
編譯一下兔毙，打開index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
hello, world!
<script type="text/javascript" src="static/index.c04c40a250e85ea100ab.js"></script></body>
</html>
沒(méi)看到有引入css巴偾怼？你個(gè)騙紙澎剥！
別著急锡溯，試著雙擊index.html文件，在瀏覽器打開試試哑姚？是不是有樣式了祭饭！神奇，樣式是哪里來(lái)的叙量？原來(lái)css都被打包進(jìn)js里面了倡蝙！
雖然說(shuō)目的是達(dá)到了，但是總覺(jué)得有點(diǎn)不好绞佩，我們還是習(xí)慣外聯(lián)css啦寺鸥，能不能實(shí)現(xiàn)？可以品山！甩你一個(gè)plugin胆建！extract-text-webpack-plugin：
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', ['css'])
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', ['css', 'sass'])
},
{
test: /\.swig$/,
loader: 'swig'
}
]
},
plugins: [
new ExtractTextPlugin('[name].[chunkhash].css'),
...
],
...
}
看著就能明白吧，這里不再細(xì)講肘交，反正也就是這么用而已笆载。
編譯一遍，看看index.html：
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="static/index.d4085060ebf342f7a5a1.css" rel="stylesheet"></head>
<body>
hello, world!
<script type="text/javascript" src="static/index.d4085060ebf342f7a5a1.js"></script></body>
</html>
完美涯呻！
到這里凉驻，我們的打包工作算是介紹完了，下面我們?cè)囍罱ㄩ_發(fā)環(huán)境魄懂。
五沿侈、開發(fā)環(huán)境
我們?cè)谑褂胓ulp的時(shí)候，搭建開發(fā)環(huán)境是借助browser-sync市栗，而對(duì)于webpack來(lái)說(shuō)，我們有更好的選擇：webpack-dev-server！
webpack-dev-server是webpack官網(wǎng)提供的一款本地開發(fā)服務(wù)器填帽，可以為我們提供一個(gè)適用于在webpack下進(jìn)行開發(fā)的環(huán)境蛛淋。
webpack-dev-server的用法其實(shí)很簡(jiǎn)單，基于webpack的配置篡腌，稍稍補(bǔ)充一些內(nèi)容就可以了褐荷。webpack-dev-server有兩種使用方式，cli和api嘹悼，我們分別做介紹叛甫。
在開始之前，我們需要針對(duì)開發(fā)環(huán)境單獨(dú)創(chuàng)建一份配置文件杨伙，有印象的同學(xué)可以記得其监，我們上一節(jié)講過(guò)，打包與開發(fā)的配置文件有一個(gè)不同點(diǎn)限匣，打包是以產(chǎn)出并且優(yōu)化為目的的抖苦，而開發(fā)則更側(cè)重效率，所以我們需要把一些壓縮和多余的優(yōu)化手段給去掉米死，減輕開發(fā)過(guò)程中的編譯負(fù)擔(dān)锌历。
我們新建一份配置文件webpack.dev.config.js：
// webpack.dev.config.js
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
index: ['./src/js/index.js']
},
output: {
path: path.resolve(__dirname, './dist/static')
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.scss', '.swig']
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.swig$/,
loader: 'swig'
}
]
},
plugins: [
new HtmlWebpackPlugin({
chunks: ['index'],
filename: '../index.html',
template: './src/tpl/index',
inject: true
})
]
}
我們把extract-text-webpack-plugin去掉，再把為了避免緩存而在文件名加戳的方式也去掉峦筒，這樣就差不多了究西。
值得注意的是，我們把path和publicPath兩項(xiàng)都去掉了物喷，這里是為了配合下面的cli方案使用怔揩，我們接下去看就會(huì)明白。
cli
cli的方式要求我們?nèi)职惭bwebpack-dev-server：
npm install webpack-dev-server -g
然后我們直接在命令行里輸入：
webpack-dev-server --config ./webpack.dev.config.js --display-error-details --devtool eval --content-base ./ --inline --progress --colors --host 0.0.0.0
天了嚕脯丝，這也太長(zhǎng)了商膊。這長(zhǎng)長(zhǎng)的一串命令，都是針對(duì)webpack-dev-server初始化的配置宠进，當(dāng)然晕拆，webpack-dev-server的配置也是可以在webpack.dev.config.js里定義的，只是我們這里主要展示cli的用法材蹬，所以就直接這樣輸入了实幕，具體各個(gè)參數(shù)是什么功能，我們可以不必全部了解堤器，因?yàn)檫@里并沒(méi)有特別關(guān)鍵的配置項(xiàng)昆庇，大部分都是對(duì)終端里輸出形式的一些設(shè)置，我們挑重點(diǎn)的來(lái)說(shuō)：
- content-base 設(shè)置開發(fā)服務(wù)器的根目錄闸溃；
- host 設(shè)置為0.0.0.0使我們?cè)诰钟蚓W(wǎng)中可以通過(guò)ip的方式訪問(wèn)整吆；
- hot 配置熱更新拱撵。
熱更新的作用是使得我們?cè)谛薷牟⒈４娲a之后，在不刷新瀏覽器的情況下表蝙，自動(dòng)更新瀏覽器對(duì)應(yīng)部分的代碼拴测！注意，此時(shí)頁(yè)面是不會(huì)刷新的府蛇，但變化立刻就可以反映出來(lái)集索！這一項(xiàng)我們并沒(méi)有設(shè)置，為什么汇跨？因?yàn)檫@里有一點(diǎn)小問(wèn)題务荆，熱更新的功能目前并不能對(duì).html（或者靜態(tài)模板）這樣的文件起作用，也就是說(shuō)穷遂，如果我們修改的是html函匕，它將會(huì)不起任何作用，除非我們手動(dòng)刷新塞颁，才能看到效果浦箱。這就有點(diǎn)撿芝麻丟西瓜了，所以我們選擇了放棄它祠锣。
當(dāng)然酷窥，如果是像react這樣的主要由js來(lái)構(gòu)建的項(xiàng)目，那我們可以毫無(wú)顧忌地使用熱更新伴网。
我們?cè)谂渲梦募腥サ袅藀ublicPath的設(shè)置蓬推，其實(shí)你可以試著設(shè)置一下，你會(huì)發(fā)現(xiàn)publicPath是會(huì)影響到全部的資源包括index.html澡腾，使得我們所有的文件都被放在服務(wù)器的static目錄下沸伏，此時(shí)只能通過(guò)/static來(lái)訪問(wèn)到index.html，所以我們選擇去掉這兩項(xiàng)設(shè)置动分，講文件統(tǒng)一編譯打包到根目錄下毅糟。
其他配置項(xiàng)有興趣的同學(xué)可以到官網(wǎng)的文檔里了解。
api
cli的方式雖然很方便很簡(jiǎn)單澜公，但是如果要使用更多的定制化姆另，api會(huì)更靈活一些。
注意坟乾，這一部分內(nèi)容十分重要迹辐，因?yàn)槲覀冎竽酥料乱还?jié)的文章里，都是基于api來(lái)配置工作流的甚侣，請(qǐng)務(wù)必掌握這一節(jié)的內(nèi)容明吩，如果你還有再深入研究下去的想法的話，不要滿足于cli的便捷方式而對(duì)這一部分內(nèi)容粗略帶過(guò)殷费。
使用api的方式印荔，意味著我們需要自己來(lái)手動(dòng)定義一個(gè)開發(fā)服務(wù)器低葫，并且補(bǔ)充相關(guān)配置項(xiàng)，為了使配置與實(shí)現(xiàn)邏輯分開躏鱼，我們還是使用原來(lái)那份配置文件webpack.dev.config.js氮采，但是新建一份js文件server.js來(lái)編寫這個(gè)服務(wù)器邏輯殷绍。
var WebpackDevServer = require('webpack-dev-server')
var webpack = require('webpack')
var config = require('./webpack.dev.config.js')
var path = require('path')
var compiler = webpack(config)
var server = new WebpackDevServer(compiler, {
stats: {
colors: true,
chunks: false
}
})
server.listen(8080, 'localhost', function() {})
ok染苛，我們先來(lái)試著跑一下：
node ./server.js
回車，成功啦主到！而且運(yùn)行效果貌似跟cli的一樣茶行。
這里的內(nèi)容實(shí)在沒(méi)什么可講的，我們首先使用webpack傳入配置內(nèi)容config登钥，得到一個(gè)編譯的實(shí)例畔师，之后我們?cè)賱?chuàng)建一個(gè)webpackDevServer的實(shí)例（本地服務(wù)器），來(lái)跑這份編譯實(shí)例牧牢，服務(wù)器監(jiān)聽8080端口看锉，所以我們?cè)跒g覽器中輸入http://localhost:8080就可以訪問(wèn)了，搞定塔鳍！
到這里就ok了嗎伯铣？其實(shí)還沒(méi)有，我們?cè)囍薷膇ndex.js轮纫，然后保存腔寡，看看瀏覽器。
瀏覽器沒(méi)有反應(yīng)掌唾，也就是說(shuō)放前，這里還沒(méi)有實(shí)現(xiàn)自動(dòng)刷新瀏覽器的功能，我們配置少了一些東西糯彬。
好凭语，那我們接著來(lái)。
webpackDevServer的官方文檔里其實(shí)已經(jīng)說(shuō)得很清楚了：
Similar to the inline mode the user must make changes to the webpack configuration.
Three changes are needed:
- add an entry point to the webpack configuration:
webpack/hot/dev-server. - add the
new webpack.HotModuleReplacementPlugin()to the webpack configuration. - add
hot: trueto the webpack-dev-server configuration to enable HMR on the server.
這里就算看不懂意思也能猜得到吧~
- 每個(gè)入口都添加
webpack/hot/dev-server - plugins里增加
new webpack.HotModuleReplacementPlugin() - 配置
hot: true
二話不說(shuō)就開搞撩扒，我們按照指示修改得到最終的server.js長(zhǎng)這樣：
var WebpackDevServer = require('webpack-dev-server')
var webpack = require('webpack')
var config = require('./webpack.dev.config.js')
var path = require('path')
for (var key in config.entry) {
var entry = config.entry[key]
entry.unshift('webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server')
}
config.plugins.push(new webpack.HotModuleReplacementPlugin())
var compiler = webpack(config)
var server = new WebpackDevServer(compiler, {
hot: true,
stats: {
colors: true,
chunks: false
}
})
server.listen(8080, 'localhost', function() {})
都是挺簡(jiǎn)單的東西沒(méi)啥看不懂的似扔，咱就不細(xì)講了，直接跑起來(lái)却舀！
修改一下index.js虫几，保存！呀挽拔，效果出來(lái)了辆脸，挺好；
修改一下index.scss螃诅，呀啡氢，效果出來(lái)了状囱，倍兒棒；
修改一下index.swig倘是，保存亭枷！呀，你咋就沒(méi)反應(yīng)了啊搀崭。叨粘。。
還記得我們用cli來(lái)搭建的時(shí)候遇到的類似情況嗎瘤睹？WebpackDevServer的Hot Module Replacement是不支持html模板的升敲，所以這里也一樣，怎么解決轰传？
還是像原來(lái)驴党，我們把hot: true的配置項(xiàng)去掉就好了，ok获茬，運(yùn)行一遍港庄，修改，保存恕曲，done鹏氧！
六、總結(jié)
gulpfile.js文件我們一看就明白码俩，邏輯清晰層次分明度帮，webpack的配置文件則需要細(xì)細(xì)咀嚼。
相比gulp稿存，webpack構(gòu)建工作流是不是會(huì)復(fù)雜些笨篷？當(dāng)然，我們只是對(duì)比來(lái)說(shuō)瓣履，事實(shí)上如果只是從操作來(lái)看率翅，也并沒(méi)有多復(fù)雜。我描述一個(gè)感受袖迎，看大家是不是有共鳴：
gulp是一套流程管理工具冕臭，專門管理一個(gè)個(gè)的任務(wù)，同時(shí)結(jié)合一些編譯模塊來(lái)處理各種資源文件燕锥；
webpack則是一個(gè)大而全的編譯器辜贵，主要用于各種資源文件的編譯和打包工作，由此為中心衍生出了一系列周邊工具归形，比如開發(fā)工具托慨，插件等等。
事實(shí)上暇榴，webpackDevServer編譯的文件是存放在內(nèi)存中的厚棵，操作起來(lái)速度非常的快蕉世，整個(gè)的項(xiàng)目編譯完成幾乎就是那么一個(gè)刷新的瞬間，而gulp則還是硬盤上的操作婆硬，速度要慢幾個(gè)量級(jí)狠轻，我們沒(méi)有感受到明顯的差異，那是因?yàn)轫?xiàng)目還不夠大彬犯。
有沒(méi)有留意到向楼，我們這一節(jié)并沒(méi)有像上一節(jié)那樣介紹到ftp工具？之所以沒(méi)有作介紹躏嚎，是因?yàn)閣ebpack并沒(méi)有提供這樣的插件或者模塊去完成這樣的工作蜜自，事實(shí)上也不應(yīng)該有菩貌，因?yàn)閣ebpack本身是一個(gè)資源處理器卢佣，與項(xiàng)目的上傳部署沒(méi)有太多關(guān)系。我們需要借助其他的npm包箭阶，用一種毫無(wú)聯(lián)系的方式去組合這兩個(gè)功能虚茶，我們可能需要編寫一個(gè)ftp.js，不知大家是否還記得我們上一節(jié)當(dāng)中的npm run build && npm run upload命令仇参？差不多就是這樣嘹叫。這個(gè)ftp.js就跟webpack的關(guān)系相當(dāng)微弱了，不像我們寫gulp那樣诈乒，擴(kuò)展一個(gè)功能的時(shí)候罩扇，只需要寫多一個(gè)task。
這里概念非常抽象怕磨，我也不能完完整整地傳達(dá)喂饥，不知道大家理解多少。老方法肠鲫，我還是舉個(gè)栗子來(lái)說(shuō)明：
webpack就好比一套很好用的螺絲刀员帮，基本所有的機(jī)器的維修工作都能應(yīng)付。但是如果需要完整一點(diǎn)的工程导饲，我們可能還需要大錘啊電鉆啊什么亂七八糟的捞高。但是東西一過(guò)來(lái)可能沒(méi)法整理到一起，只能拿個(gè)塑料袋粗略地裝起來(lái)渣锦；
gulp好比一個(gè)工具箱硝岗，里面也有幾件比較簡(jiǎn)單的螺絲刀，如果有其他的工具袋毙，來(lái)了就往里面放型檀，妥妥的。
嗯娄猫，又是一個(gè)不怎么貼切的栗子贱除，湊合著用吧憋唧唧歪歪的生闲。
我們先理解到這里，進(jìn)一步的對(duì)比月幌，我們會(huì)在教程最后的章節(jié)里呈現(xiàn)一次比較細(xì)致的說(shuō)明碍讯。
后話：我們可以把webpack這把好用的螺絲刀放gulp這個(gè)工具箱里嗎？答案當(dāng)然是yes扯躺！帥（美）的人已經(jīng)動(dòng)手了捉兴，丑的還在賣萌。下一節(jié)【強(qiáng)化：構(gòu)建易用易擴(kuò)展的工作流】我們將為大家講解如何使用gulp結(jié)合webpack录语，各取所長(zhǎng)地搭建一套簡(jiǎn)單易用倍啥、高可擴(kuò)展性的工作流。
本次演示項(xiàng)目的git地址：webpack_base
【上一篇：入門：十分鐘自動(dòng)化構(gòu)建】
【下一篇：強(qiáng)化：構(gòu)建易用易擴(kuò)展的工作流】
（文章有任何謬誤之處澎埠，歡迎留言指出）
