1,gulp更注重前端開發流程

2,webpack更注重模組化開發

Gulp和Webpack的基本區別：

gulp可以進行js，html，css，img的壓縮打包，是自動化構建工具，可以將多個js檔案或是css壓縮成一個檔案，並且可以壓縮為一行，以此來減少檔案體積，加快請求速度和減少請求次數；並且gulp有task定義處理事務，從而構建整體流程，它是基於流的自動化構建工具。

Webpack是前端構建工具，實現了模組化開發和檔案處理。他的思想就是“萬物皆為模組”，它能夠將各個模組進行按需載入，不會導致載入了無用或冗餘的程式碼。所以他還有個名字叫前端模組化打包工具。

就我而言，我在實際當中會將兩種都選擇混合使用。雖然兩個都可以進行程式碼的壓縮合並減少程式碼體積，但gulp.config.js中gulp的程式碼更加簡單易懂，需要壓縮合並誰就用哪個方法，而webpack樣式合併需要在node環境下下載外掛才能使用。另一點，gulp 是基於流的打包工具，需要誰，引用誰，並且他的壓縮簡單明瞭，後期維護起來方便，webpack則可以將具體的模組進行劃分，需要哪個模組就載入哪個模組，實現按需載入，並且排除掉冗餘程式碼，減少程式碼體積。

總結起來就是，gulp是基於流的自動化構建工具，但不包括模組化的功能，如果要用到的話，就需要引入外部檔案，比如require.js等；而webpack是自動化模組打包工具，本身就具有模組化，並且也具有壓縮合並的功能。二者側重點不同，我認為相互結合使用會提高程式碼質量和程式碼的優化。

gulp的核心配置檔案:

webpack的核心配置檔案:

1,必須要有一個入口檔案,入口檔案是入口起點告訴 webpack 從哪裡開始，並遵循著依賴關係圖表知道要打包什麼。可以將您應用程式的入口起點認為是根上下文(contextual root)或 app 第一個啟動檔案       入口檔案需要我們自己建立,並在webpack.config.js中的entry:處寫上正確路徑

2,出口            將所有的資源(assets)歸攏在一起後，我們還需要告訴 webpack 在哪裡打包我們的應用程式。webpack 的 output 屬性描述了如何處理歸攏在一起的程式碼(bundled code)。

3載入器    

webpack 的目標是，讓 webpack 聚焦於專案中的所有資源(asset)，而瀏覽器不需要關注考慮這些（這並不意味著資源(asset)都必須打包在一起）。webpack 把每個檔案(.css, .html, .scss, .jpg, etc.) 都作為模組

webpack loader 會將這些檔案轉換為模組，而轉換後的檔案會被新增到依賴圖表中。

在更高層面，webpack 的配置有兩個目標。

1. 識別出(identify)應該被對應的 loader 進行轉換(transform)的那些檔案
2. 由於進行過檔案轉換，所以能夠將被轉換的檔案新增到依賴圖表（並且最終新增到 bundle 中）(use屬性)

以上配置中，我們對一個單獨的 module 物件定義了 rules 屬性，裡面包含兩個必須屬性：test 和 use。這可以告訴 webpack compiler 如下：

“嘿，webpack compiler，當你碰到「在 require()/import 語句中被解析為 '.js' 或 '.jsx' 的路徑」時，在你把它們新增並打包之前，要先使用 babel-loader 去轉換”。

W> 重要的是要記得，在 webpack 配置中定義 loader 時，要定義在 module.rules 中，而不是 rules。在定義錯時 webpack 會提出嚴重的警告。

我們還有尚未提到的 loader，可以設定更多特定屬性。

4,外掛

外掛是 wepback 的支柱功能。在你使用 webpack 配置時，webpack 自身也構建於同樣的外掛系統上！

webpack 外掛是一個具有 apply 屬性的 JavaScript 物件。 apply 屬性會被 webpack compiler 呼叫，並且 compiler 物件可在整個 compilation 生命週期訪問。