構建工具將源代碼轉換成可執行的javascript、css、html代碼，包括
代碼轉換：將TS轉換成JS，將SCSS、LESS編譯成CSS等。
文件優化：壓縮JS、CSS、html代碼，壓縮合並圖片等。
代碼分割：提取多個頁面的公共代碼，提取首屏不需要執行部分的代碼讓其異步加載。
模塊合並：在采用模塊化的項目里會有許多個模塊和文件，需要通過構建功能將模塊分類合並成一個文件。
自動刷新：監聽本地源代碼的變化，自動重新構建、刷新瀏覽器。
代碼校驗：在代碼被提交到倉庫前，需要校驗代碼是否符合規范，以及單元測試是否通過。
自動發布：更新代碼后，自動構建出線上發布代碼並傳輸給發布系統。
構建其實就是工程化、自動化思想在前端開發中的體現，將一系列流程用代碼去實現，讓代碼自動化地執行這一系列復雜的流程。
歷史上先后出現了一系列構建工具，他們各有各的優缺點。
1.NPM Script
Npm是node安裝時候自帶的包管理器，Npm Script是Npm內置的一個功能，允許在package.json文件里使用scripts字段定義任務：
{
"scripts":{
"dev":"node dev.js"
}
}
NPM Script的優點是內置，無需安裝其他依賴。缺點是功能太簡單，雖然提供了pre和post兩個鈎子，但是不能方便的管理多個任務之間的依賴。
2.Grunt
Grunt（https://gruntjs.com）和Npm Script類似，也是一個任務執行者。Grunt有大量現成的插件封裝了常見的任務，也能管理任務之間的依賴關系，自動化地執行依賴的任務，每個任務的具體執行代碼和依賴關系寫在配置文件Gruntfile.js里
Grunt的優點是：
靈活，它只負責執行我們定義的任務
大量的可復用插件封裝好了常見的構建任務。
Grunt的缺點是集成度不高，要寫很多配置后才可以用，無法做到開 箱即用。
Grunt相當於進化版的NPM Script，它的誕生其實是為了彌補NPM Script的不足。
3.gulp
gulp是一個基於流的自動化構建工具。除了可以管理和執行任務，還支持監聽文件、讀寫文件。gulp被設計的非常簡單，只通過下面5種方法就可以支持幾乎所有構建場景：
通過gulp.task注冊一個任務
通過gulp.run執行任務
通過gulp.watch監聽文件的變化
聽過gulp.src讀取文件
通過gulp.dest寫文件
gulp的最大特點是引入了流的概念,同時提供了一系列常用的插件去處理流,流可以在插件之間傳遞.
gulp的優點是好用又不失靈活,即可以單獨完成構建,也可以和其他工具搭配使用.
缺點和grunt類似,集成度不高,要寫很多配置后才能使用,無法做到開箱即用
可以把gulp看作grunt的加強版。相對於grunt，gulp增加了監聽文件、讀寫文件、流式處理的功能。
4.Fis3
Fis3是來自百度的國產構建工具，相對於grunt，gulp這些只提供了基本功能的工具，Fis3集成了web開發中常用的購將功能，
讀寫文件：通過fis.match讀文件,release配置文件的輸出路徑
資源定位：解析文件之間的依賴關系和文件位置。
文件指紋：在通過useHash配置輸出文件時為文件Url加上md5戳，來優化瀏覽器的緩存。
文件編譯：通過parser配置文件解析器做文件轉換，例如將ES6編譯成ES5。
壓縮資源：通過optimizer配置文件壓縮方法
圖片合並：通過spriter配置合並CSS里導入的圖片到一個文件中，來減少HTTP請求數。
Fis3的優點是集成了各種web開發所需的構建功能，配置簡單、開箱即用。
缺點是官方不在更新和維護，不支持最新版本的node.js
Fis3是一種專注於web開發的完整解決方案，如果將grunt、gulp比作汽車的發動機，那可以將Fis3比作一輛完整汽車。
5.Webpack
webpack是一個打包模塊化JS的工具，在webpack里一切文件都是模塊，通過loader轉換文件，通過plugin注入鈎子，最后輸出由多個模塊組合成的文件。webpack專注於構建模塊化項目。
一切文件如JS、CSS、SCSS、圖片、模板，對於webpack來說都是一個個模塊，這樣的好處是能夠清晰的描述各個模塊之間的依賴關系，以方便webpack對模塊進行組合和打包。經過webpack的處理，最終會輸出瀏覽器能使用的靜態資源。
webpack具有很大的靈活性，能配置處理文件的方式，使用方法大致如下：
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
}
webpack的優點是：
專注於處理模塊化的項目，能做到開箱即用，一步到位
可以通過plugin擴展，完整好用又不失靈活
使用場景不局限於web開發
社區龐大活躍，經常引入緊跟時代發展的新特性，能為大多數場景找到已有的開源擴展
良好的開發體驗
webpack的缺點是只能用於采用模塊化開發的項目。
6.Rollup
Rollup是一個和webpack很類似但專注於ES6的模塊打包工具，它的亮點在於，能針對ES6源碼進行Tree Shaking，以去除那些已被定義但沒使用的代碼並進行Scope Hoisting（作用域提升），以減小輸出文件的大小和提升運行性能。然而Rollup的這些亮點隨后就被webpack模仿和實現。由於rollup的方法和webpack差不多，所以說一下他們的差別：
Rollup是在Webpack流行后出現的替代品
Rollup生態鏈不完整，體驗不如Webpack
Rollup的功能不如webpack完善，但其配置和使用更簡單
Rollup不支持Code Spliting，但好處是在打包出來的代碼中沒有webpack那段代碼的加載、執行和緩存的代碼。
Rollup在用於打包JS代碼庫時比webpack更有優勢，因為其打包出來的代碼更小、更快。但它的功能不夠完善，在很多場景下找不到現成的解決方案。
為什么選擇Webpack？
NPM Screipt和Grunt時代，web開發要做的事情變多，流程復雜，自動化思想被引入，用於簡化流程。
在Glup時代，開始出現一些新語言用於提高開發效率，流失處理思想的出現是為了簡化文件轉換的流程，例如將ES6轉化為ES5
在Webpack時代，由於單頁應用的流行，網頁的功能和實現代碼變得復雜、龐大，web開發向模塊化改進。
這些構建工具都有各自的定位和專注點，它們之間既可以單獨完成任務，也可以互相搭配來彌補各自的不足。在了解這些常見的構建工具后，我們需要根據自己的需求去判斷應該如何選擇和搭配它們才能更好的滿足自己的需求。
經過多年發展，webpack已經成為構建工具中的首選，這是有原因的：
大多數團隊在開發新項目時，會采用緊跟時代的技術，這些技術幾乎都會采用“模塊化+新語言+新框架”，webpack可以為這些新項目提供一站式的解決方案。
webpack有良好的生態鏈和維護團隊，能提供良好的開發體驗並保證質量。
webpack被全世界大量的web開發者使用和驗證，能找到各個層面所需的教程和經驗分享。