grunt/gulp的核心是task 我們可以配置一系列的task，並且定義task要處理的事務（例如es6、ts轉化，壓縮，scss轉成css） 之後讓grunt/gulp來依次執行這些task，而且讓整個流程自動化。所以grunt/gulp也被稱為前端自動化任務管理工具。
我們來看乙個gulp的task 下面的task就是將src下面的所有js檔案轉成es5的語法。 並且最終輸出到dist資料夾中。
如果你的工程模組依賴非常簡單，甚至是沒有用到模組化的概念。
只需要進行簡單的合併、壓縮，就使用grunt/gulp即可。
但是如果整個專案使用了模組化管理，而且相互依賴非常強，我們就可以使用更加強大的webpack了。
所以，grunt/gulp和webpack有什麼不同呢？
grunt/gulp更加強調的是前端流程的自動化，模組化不是它的核心。
webpack更加強調模組化開發管理，而檔案壓縮合併、預處理等功能，是他附帶的功能。
webpack是乙個前端模組化方案，更側重模組打包。我們可以把開發中的所有資源（、js檔案、css檔案等）都看成模組，通過loader（載入器）和plugins（外掛程式）對資源進行處理，打包成符合生產環境部署的前端資源。
webpack就是需要通過其配置檔案（webpack.config.js）中 entry 配置的乙個入口檔案（js檔案），然後在解析過程中，發現其他的模組，如scss等檔案，再呼叫配置的loader或者外掛程式對相關檔案進行解析處理。
webpack和webpack中載入器的基本使用
1 執行 npm install webpack webpack cli d 命令，安裝webpack 相關的包 2 在專案根目錄中，建立名為webpack.config.js 的 webpack 配置檔案 3 在 webpack 的配置檔案中，初始化如下基本配置 module.exports 4 ...
webpack 服務和熱更新
今天來分享一招，看標題，熱更新，其實就是即寫即現，當然如果你用的是雙屏電腦這樣更便於開發，就能及時看到你所要的效果。設定webpack dev server devserver 配置webpack開發。服務配置伺服器基本執行路徑，用於找到程式打包位址安裝失敗原因 scripts open就是你執行完...
Gulp和Webpack的區別
gulp 強調的是前端開發的流程，通過配置一系列的task，定義task處理的事務 例如 檔案壓縮合併，啟動server 然後定義執行順序，來讓gulp執行task，從而構建其前端專案的流程。合併後仍然是你寫的 只是區域性變數名被替換，一些語法做了轉換而已，整體內容並沒有發生改變。webpack 側...