webpack是時(shí)下十分流行的編譯和打包工具，它提供一種可擴(kuò)展的loader的方式，簡(jiǎn)單的配置，便可以編譯打包各類(lèi)型的文件，包括js、css、image、font、html，以及各種預(yù)編譯語(yǔ)言都不在話下。

一、回顧與思考

在上一節(jié)的【入門(mén)：十分鐘自動(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)幫助理解：

你用上次搭建的工作流開(kāi)發(fā)了一個(gè)網(wǎng)站，然后上線。
第二天打開(kāi)發(fā)現(xiàn)有bug，心想尼瑪趕緊趁著老板沒(méi)發(fā)現(xiàn)修復(fù)一下。
改完代碼，打包，發(fā)布，一氣呵成，完美。
然而十分鐘以后老板讓你去一趟辦公室，打開(kāi)頁(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也是寫(xiě)好配置文件才能開(kāi)始工作。

全局安裝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ú)立開(kāi)來(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的拓展名之后，在開(kāi)發(fā)中我可以直接require('./common')，而不需要require('./common.js')。

module
最重要的一個(gè)部分，我們?cè)谶@里定義針對(duì)各種類(lèi)型文件的loader（加載器/編譯器），可以看到我們分別定義了css、scss、swig三種文件對(duì)應(yīng)的loader，多個(gè)loader之間用!隔開(kāi)，'-loader'可以省略不寫(xiě)。注意，編譯的優(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)文章，這里不作深入展開(kāi)；或者關(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)里配置了這類(lèi)文件的相關(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]

打開(kāi)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ì)不一樣。

這不正是我們開(kāi)頭想要的版本管理嗎？太美好了，沒(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?。?/p>

我們?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')

編譯一下，打開(kāi)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文件，在瀏覽器打開(kāi)試試？是不是有樣式了！神奇，樣式是哪里來(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è)囍罱ㄩ_(kāi)發(fā)環(huán)境。

五、開(kāi)發(fā)環(huán)境

我們?cè)谑褂胓ulp的時(shí)候，搭建開(kāi)發(fā)環(huán)境是借助browser-sync，而對(duì)于webpack來(lái)說(shuō)，我們有更好的選擇：webpack-dev-server！

webpack-dev-server是webpack官網(wǎng)提供的一款本地開(kāi)發(fā)服務(wù)器，可以為我們提供一個(gè)適用于在webpack下進(jìn)行開(kāi)發(fā)的環(huán)境。

webpack-dev-server的用法其實(shí)很簡(jiǎn)單，基于webpack的配置，稍稍補(bǔ)充一些內(nèi)容就可以了。webpack-dev-server有兩種使用方式，cli和api，我們分別做介紹。

在開(kāi)始之前，我們需要針對(duì)開(kāi)發(fā)環(huán)境單獨(dú)創(chuàng)建一份配置文件，有印象的同學(xué)可以記得，我們上一節(jié)講過(guò)，打包與開(kāi)發(fā)的配置文件有一個(gè)不同點(diǎn)，打包是以產(chǎn)出并且優(yōu)化為目的的，而開(kāi)發(fā)則更側(cè)重效率，所以我們需要把一些壓縮和多余的優(yōu)化手段給去掉，減輕開(kāi)發(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ō)：

1. content-base 設(shè)置開(kāi)發(fā)服務(wù)器的根目錄；
2. host 設(shè)置為0.0.0.0使我們?cè)诰钟蚓W(wǎng)中可以通過(guò)ip的方式訪問(wèn)；
3. 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è)開(kāi)發(fā)服務(wù)器，并且補(bǔ)充相關(guān)配置項(xiàng)，為了使配置與實(shí)現(xiàn)邏輯分開(kāi)，我們還是使用原來(lái)那份配置文件webpack.dev.config.js，但是新建一份js文件server.js來(lái)編寫(xiě)這個(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

回車(chē)，成功啦！而且運(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)聽(tīng)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: true to the webpack-dev-server configuration to enable HMR on the server.

這里就算看不懂意思也能猜得到吧~

• 每個(gè)入口都添加webpack/hot/dev-server
• plugins里增加new webpack.HotModuleReplacementPlugin()
• 配置 hot: true

二話不說(shuō)就開(kāi)搞，我們按照指示修改得到最終的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í)候遇到的類(lèi)似情況嗎？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是一套流程管理工具，專(zhuān)門(mén)管理一個(gè)個(gè)的任務(wù)，同時(shí)結(jié)合一些編譯模塊來(lái)處理各種資源文件；
webpack則是一個(gè)大而全的編譯器，主要用于各種資源文件的編譯和打包工作，由此為中心衍生出了一系列周邊工具，比如開(kāi)發(fā)工具，插件等等。

事實(shí)上，webpackDevServer編譯的文件是存放在內(nèi)存中的，操作起來(lái)速度非常的快，整個(gè)的項(xiàng)目編譯完成幾乎就是那么一個(gè)刷新的瞬間，而gulp則還是硬盤(pán)上的操作，速度要慢幾個(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è)功能，我們可能需要編寫(xiě)一個(gè)ftp.js，不知大家是否還記得我們上一節(jié)當(dāng)中的npm run build && npm run upload命令？差不多就是這樣。這個(gè)ftp.js就跟webpack的關(guān)系相當(dāng)微弱了，不像我們寫(xiě)gulp那樣，擴(kuò)展一個(gè)功能的時(shí)候，只需要寫(xiě)多一個(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)手了，丑的還在賣(mài)萌。下一節(jié)【強(qiáng)化：構(gòu)建易用易擴(kuò)展的工作流】我們將為大家講解如何使用gulp結(jié)合webpack，各取所長(zhǎng)地搭建一套簡(jiǎn)單易用、高可擴(kuò)展性的工作流。

本次演示項(xiàng)目的git地址：webpack_base

【上一篇：入門(mén)：十分鐘自動(dòng)化構(gòu)建】
【下一篇：強(qiáng)化：構(gòu)建易用易擴(kuò)展的工作流】

（文章有任何謬誤之處，歡迎留言指出）