1.從問題開始

什么是模塊化開發(fā)？
為什么使用Webpack恨豁？
Webpack中有哪些配置嚣镜，幫我們解決什么問題？
Webpack中有哪些概念橘蜜？
Webpack內(nèi)核和原理是如何實(shí)現(xiàn)的菊匿？
Webpack除了打包還能做什么？

2.Webpack學(xué)習(xí)順序

Webpack開發(fā)配置：是什么，怎么用
Webpack內(nèi)核原理：工作流跌捆、重要的對象和實(shí)現(xiàn)（流程機(jī)制）
Webpack工程化實(shí)踐：開發(fā)中面臨的現(xiàn)實(shí)問題和需求

3.前端模塊化

前端模塊化主要指JS模塊徽职，常見的是NodeJS的NPM包，每個(gè)模塊可能是最小甚至是最優(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)隊(duì)擴(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模塊化依賴打包開始擅憔，使用強(qiáng)勁的插件機(jī)制，解決前端資源依賴管理問題檐晕，依賴社區(qū)力量形成前端工程化解決方案暑诸。主要是面向JS。

5.關(guān)于Webpack

5.1 What is Webpack辟灰？

Webpack本質(zhì)是JS應(yīng)用程序的靜態(tài)模塊打包器（static module bundler）个榕。

image.png

Webpack在處理應(yīng)用程序時(shí)，會在內(nèi)部創(chuàng)建一個(gè)依賴圖（dependency graph）芥喇，用于映射到項(xiàng)目需要的每個(gè)模塊西采，然后將所有依賴生成到一個(gè)或多個(gè)的bundle。

5.2 Webpack解決什么問題继控？

5.2.1 各類構(gòu)建工具的打包思路

Grunt械馆、Gulp：遍歷源文件 → 匹配規(guī)則 → 打包，做不到按需加載湿诊，對于打包的資源狱杰，頁面用不用也是不關(guān)心的。
Webpack：從入口文件開始厅须，經(jīng)過模塊依賴加載仿畸、分析、打包三個(gè)流程完成項(xiàng)目構(gòu)建朗和。在加載错沽、分析、打包的三個(gè)過程中眶拉，可以做諸如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
項(xiàng)目優(yōu)化：壓縮底哥、CDN
解決方案封裝：Loader和插件機(jī)制，完成解決方案的封裝房官，例如PWA
流程對接：測試流程趾徽、語法檢查等

最后編輯于：2019.08.20 09:06:19

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者