Webpack-前端建置工具的發展背景及入門介紹

Webpack是當下流行的「前端建置工具」之一。

首先了解建置工具

建置工具出現的來龍去脈?

過去:
早期前端工程師寫網頁,僅透過前端三大元素「JavaScript、CSS、HTML」開發web應用。

現今:
近年前端發展出許多新思維,出現了「模組化」的概念、「新框架」的出現、「新語言」的誕生,讓傳統的作法不再流行,各種可以加強開發效率的新工具出現。

  • 模組化:模組化是將一個複雜的系統,分解為多個模組以方便程式開發。例:ES6模組化是國際標準組織ECMA提出的JavaScript模組化標準,他在語言層面上實現模組化,成為瀏覽器和伺服器通用的模組化解決方案。
  • 新框架:在web應用變的龐大時,直接操作DOM會使程式變得複雜難以維護,因此出現React、Vue、Augular前端框架。
  • 新語言:ES6、TypeScript、Flow、SCSS…

然而,前端技術發展之快,卻有一個共同點:這些工具的原始碼無法直接執行,必須透過「轉換」才可以正常執行,因此,「建置工具」就誕生了。

建置工具實際做了什麼?

「建置」就是將原始程式碼,轉換成可以執行的JavaScript、CSS、HTML。

  • 程式轉換:將TypeScript編譯為JavaScript,將SCSS編譯為CSS。
  • 檔案最佳化:壓縮JavaScript、CSS、HTML程式,壓縮合併圖片。
  • 程式分割:分析首頁不需要執行的部分程式,讓其非同步載入。
  • 模組合併:採用模組化建置的專案中的有多個模組、檔案,透過建置功能,將模組合併為一個檔案。
  • 自動更新:監聽本機端程式碼的變動,自動重新建置、更新瀏覽器。
  • 程式驗證:在程式被傳送到倉庫前,需要驗證程式是否符合標準,以及單元測試是否通過。
  • 自動發布:更新程式後,自動建置出現上發布程式,並傳輸給發布系統。

「建置」的目的最主要就是工程化、自動化。

常見的「建置工具」

按誕生的時間排序

  • Npm Script:Node.js附帶的套件管理員
  • Grunt:自動化執行依賴的工作
  • Gulp:以串流為基礎的自動化建置工
  • Fis3:整合各種Web開發需要的建置功能
  • Webpack:包裝模組化JavaScript的工具
  • Rollup:專注於ES6的模組包裝工具

時空背景:

  • 在Npm Script和Grunt時代,Web開發要做的事情變多、流程變複雜,自動化的思維興起,用於簡化流程。
  • 在Gulp時代,新語言出現,流式處理思想出現是為了簡化檔案轉換的流程。
  • 在Webpack的時代,由於單頁應用的流行,網頁的功能和實現程式變得複雜、龐大,因此Web開發相模組化改進。

    Webpack究竟是什麼?

    專注於建構模組化的專案

    在Webpack裡的所有檔案皆被視為模組,透過Loader轉換檔案,透過Plugin植入鉤子,最後輸出為一個由「多個模組合成的檔案」。

    所以一個專案中的所有檔案,包含JavaScript、CSS、SCSS、圖片、範本,在經過Webpack的處理,最後會輸出為瀏覽器可以使用的靜態資源。

使用方法如下:

1
2
3
4
5
6
7
8
module.expert={
//所有模組的入口,Webpack從入口開始遞迴解析出所有依賴的模組
entry: './app/js',
output:{
//將入口所依賴的所有模組包裝成一個檔案bundle.js輸出
filename: 'bundle.js'
}
}

參考資料來源

  • JS高手昇華之路Webpack是唯一的路徑-吳浩麟 著
© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero