前端開發(fā)趨向于模塊化、組件化、工程化，主要是為了提升開發(fā)效率，工程化建設(shè)和工具鏈打造是重頭。
1.從問題開始
- 什么是模塊化開發(fā)？
- 為什么使用Webpack？
- Webpack中有哪些配置，幫我們解決什么問題？
- Webpack中有哪些概念？
- Webpack內(nèi)核和原理是如何實現(xiàn)的？
- Webpack除了打包還能做什么？
2.Webpack學(xué)習(xí)順序
- Webpack開發(fā)配置：是什么，怎么用
- Webpack內(nèi)核原理：工作流、重要的對象和實現(xiàn)（流程機制）
- Webpack工程化實踐：開發(fā)中面臨的現(xiàn)實問題和需求
3.前端模塊化
前端模塊化主要指JS模塊，常見的是NodeJS的NPM包，每個模塊可能是最小甚至是最優(yōu)的代碼組合，也可能是解決某些問題由很多特定模塊組成的大模塊。
編寫代碼常見copy，但是copy太多，代碼的可維護(hù)性會下降。
3.1 JS模塊化規(guī)范
前端的模塊化規(guī)范有CommonJS、AMD、ES6 Module、CMD、UMD等。
3.1.1 CommonJS
NodeJS采用這種模塊化方案。
是同步加載模塊依賴的方式。
-
require：引入模塊 -
exports：導(dǎo)出模塊內(nèi)容 -
module：模塊本身
3.1.2 AMD
RequireJS提出并完善的一套模塊化規(guī)范。
是異步加載模塊依賴的方式。
- require：引入模塊
- id：模塊id
- dependencies：模塊依賴
- factory：模塊的工廠函數(shù)，模塊的初始化操作函數(shù)
3.1.3 ES6 Module
ES6提出的模塊化規(guī)范。
- import：引入模塊依賴
- export：模塊導(dǎo)出
3.2 CSS的模塊化
CSS使用@import引入自己的模塊依賴。
在CSS的預(yù)處理器Less或者Sass中，@import還可以導(dǎo)入一些變量、函數(shù)和mixin的定義。
@import 'hello.css';
4.前端工程化面臨的問題
- 模塊多了，依賴如何管理？
- 頁面復(fù)雜度提升以后，多頁面、多系統(tǒng)、多狀態(tài)怎么做？
- 團(tuán)隊擴(kuò)大以后，如何協(xié)作？
- 如何解決多人研發(fā)中的性能、代碼風(fēng)格問題？
- 如何權(quán)衡研發(fā)效率與產(chǎn)品迭代的問題？
前端工程化的發(fā)展，得益于NodeJS的發(fā)展，讓我們可以使用工程化工具來解決問題。
4.1 Grunt、Gulp工程化
早期前端工程化，以Grunt、Gulp等構(gòu)建工具為主，主要解決重復(fù)任務(wù)的問題，它們將某些功能拆解成固定步驟的任務(wù)，然后編寫工具來解決。如：圖片壓縮、地址添加hash、替換等，這些都是固定套路的重復(fù)工作。主要是面向結(jié)果和流程。
4.2 Webpack工程化
Webpack從JS模塊化依賴打包開始，使用強勁的插件機制，解決前端資源依賴管理問題，依賴社區(qū)力量形成前端工程化解決方案。主要是面向JS。
5.關(guān)于Webpack
5.1 What is Webpack？
Webpack本質(zhì)是JS應(yīng)用程序的靜態(tài)模塊打包器（static module bundler）。
Webpack在處理應(yīng)用程序時，會在內(nèi)部創(chuàng)建一個依賴圖（dependency graph），用于映射到項目需要的每個模塊，然后將所有依賴生成到一個或多個的bundle。
5.2 Webpack解決什么問題？
5.2.1 各類構(gòu)建工具的打包思路
- Grunt、Gulp：
遍歷源文件→匹配規(guī)則→打包，做不到按需加載，對于打包的資源，頁面用不用也是不關(guān)心的。 - Webpack：從入口文件開始，經(jīng)過模塊依賴加載、分析、打包三個流程完成項目構(gòu)建。在加載、分析、打包的三個過程中，可以做諸如
code split（拆分公共代碼）的解決方案。
用人話來說，Webpack是面向JS模塊的；Grunt、Gulp是面向結(jié)果和流程的；
5.2.2 Webpack解決的傳統(tǒng)構(gòu)建工具問題
- 模塊化打包，一切皆模塊（JS、CSS）
- 語法糖：ES6轉(zhuǎn)換ES5、TypeScript
- 預(yù)處理器編譯：Less、Sass、Stylus
- 項目優(yōu)化：壓縮、CDN
- 解決方案封裝：Loader和插件機制，完成解決方案的封裝，例如PWA
- 流程對接：測試流程、語法檢查等
