他們能做到的事情部分相同(資源轉換)，但定位完全不同。

gulp

gulp 是 task manager，舉例來說，我有各種 task (babel, scss, rename, minify)，這些 task 要做甚麼事情，是我決定好的。使用 gulp 只是將這些要執行的任務用規則寫下來(如 : 任務執行的優先順序)。

task 可以是 anything。我的 task 可以自己寫，可以是校正時間、擷取網站圖片、打某個 api、清空桌面......。

gulp 做不到 bundle，但我可以藉由 webpack plugin 去打包。

gulp 的目的是管理任務，所以額外的其他功能都需要靠 plugin 幫忙。只要可以寫出的 task，gulp 都做的到。gulp 本身可以做到幾乎 anything。

webpack

webpack 是 bundler，舉例來說，我有很多資源(img, sass, js)，webpack 就可以將這些資源都打包在一起。在 bundle 前要先經過 loader 將資源先載入進 webpack，webpack 再進行打包。載入前，可以額外先做一些事情，比方說 js 在 load 進來前可以先經過 babel loader；sass 也是一樣，可以先經過 sass 的 loader 再包進去 webpack。

webpack 做不到某些 task (校正時間、定時 call api)

webpack 主要的功能就是 bundle。

為甚麼要 bundle ? 因為瀏覽器以前原生沒有支援 require 之類的東西，bundle 之後就可以支援。

總結

webpack is module bundler；gulp is task manager。

1. 任何跟 webpack 有關的內容，就是在調整 loader and plugin。
2. webpack 將模組的概念擴展到任何的資源。