webpack gulp grunt 簡單介紹

本文主要是講下webpack的相關知識點，理論比較多，由於webpack的功能很是強大，說到的也基本都是常常用到的。

這三個工具都屬於前端自動化的工具，都是第三方的，而且國內不少大型團隊也都有本身成熟的自動化部署工具，如百度有FIS,騰訊有Modjs等 ；

 

下面簡單說下他們的區別：

grunt是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：壓縮文件，合併文件，簡單語法檢查。

gulp.js - 基於流的自動化構建工具，也就是基於nodejs stream基礎實現的。

　　易於使用
　　經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。
　　構建快速
　　利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。

 

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載，公共代碼提取，經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等，也就是說webpack不一樣於gulp grunt 這兩個是純工具，webpack最大的特色就是自身支持模塊化兒，任何資源均可以做爲模塊來引入。

 

你們對這幾個工具的執行原理有興趣的也能夠本身研究下，相信會有精彩的發現。。今天就是跟你們簡單的介紹下概念的東西，具體的配置我們之後也會說道，到時候會具體說webpack的配置。