花了一兩天回顧了下 webpack 各個(gè)配置的作用,簡(jiǎn)單記錄下。
主要閱讀列表：
http://webpack.wuhaolin.cn/(有強(qiáng)制廣告,用charles代理可以去掉，但還是建議買(mǎi)書(shū)支持)
http://imweb.io/topic/5a4451c3a192c3b460fce366
http://taobaofed.org/blog/2016/09/09/webpack-flow/ https://lihuanghe.github.io/2016/05/30/webpack-event.html

一、webpack 背景

1、面臨的問(wèn)題

前端模塊思想的普及，vue、less 等各種框架工具的出現(xiàn)，讓前端開(kāi)發(fā)效率更高，但是這些框架和工具的源碼都不能直接跑在瀏覽器或者服務(wù)端，需要轉(zhuǎn)化構(gòu)建。

2、解決的手段
構(gòu)建需要把源代碼轉(zhuǎn)化成可直接在終端上運(yùn)行的 html、css、js, 具體需要實(shí)現(xiàn)的功能如下：

• 代碼轉(zhuǎn)換：ts 轉(zhuǎn)換成 js,less 轉(zhuǎn)換成 css
• 文件優(yōu)化：壓縮js、css、html,合并圖片
• 代碼分割：提取多個(gè)頁(yè)面的公共代碼，提取首屏不需要的部分讓其異步加載(不熟悉這個(gè)功能)
• 模塊合并：把模塊分類(lèi)，合并成一個(gè)文件
• 自動(dòng)刷新：監(jiān)聽(tīng)本地源代碼的變化，可以做到熱替換模塊
• 代碼校驗(yàn)：在提交代碼到遠(yuǎn)程倉(cāng)庫(kù)之前用 eslint 檢驗(yàn)代碼是否符合規(guī)范、是否通過(guò)單元測(cè)試
• 自動(dòng)發(fā)布：更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)

二、webpack的構(gòu)建流程

1、概念

在 webpack眼里，一切皆模塊,一般一個(gè)模塊就是指一個(gè)文件， 所有模塊(文件)構(gòu)建后都會(huì)打包為最終的 js,html,css,image,如下圖所示：

2、有哪些配置項(xiàng)

webpack 的配置項(xiàng)一般放在 項(xiàng)目下的 webpack.config.js 里，用一個(gè) object對(duì)象 來(lái)描述所有配置信息，如下：

• Entry：配置打包文件入口，可以是一個(gè)或者多個(gè)文件
• Output：配置輸出文件名、文件路徑
• Module：用來(lái)配置模塊的讀取和解析規(guī)則，即打包過(guò)程中規(guī)定什么類(lèi)型、什么路徑的的模塊用哪個(gè) loader 來(lái)解析，常用 loader 有babel-loader(把 es6代碼轉(zhuǎn)換成 es5)
• Resolve：配置如何尋找模塊對(duì)應(yīng)的文件，可以規(guī)定尋找文件時(shí)補(bǔ)全后綴的規(guī)則，規(guī)定尋找文件的默認(rèn)路徑別名等等
• Plugin：擴(kuò)招 webpack 構(gòu)建中各個(gè)階段的功能，比如webpack-parallel-uglify-plugin(壓縮代碼)、extract-text-webpack-plugin(提取 js 中的 css 到單獨(dú)的 css 文件中)

3、構(gòu)建流程

1）粗略構(gòu)建流程如下：
A.Webpack 啟動(dòng)后會(huì)從Entry里配置的Module開(kāi)始遞歸解析 Entry 依賴(lài)的所有 Module。
B.每找到一個(gè) Module， 就會(huì)根據(jù)配置的Loader去找出對(duì)應(yīng)的轉(zhuǎn)換規(guī)則，對(duì) Module 進(jìn)行轉(zhuǎn)換后，再解析出當(dāng)前 Module 依賴(lài)的 Module。
C.這些模塊會(huì)以 Entry 為單位進(jìn)行分組，一個(gè) Entry 和其所有依賴(lài)的 Module 被分到一個(gè)組也就是一個(gè) Chunk。
D.最后 Webpack 會(huì)把所有 Chunk 轉(zhuǎn)換成文件輸出。 在整個(gè)流程中 Webpack 會(huì)在恰當(dāng)?shù)臅r(shí)機(jī)執(zhí)行 Plugin 里定義的邏輯。
2) 詳細(xì)構(gòu)建流程如下：

三、具體怎么配置：webpack4

有了 parcel 的競(jìng)爭(zhēng)，webpack 推出了配置量極小的 webpack4，配置方法可以參考：
1、webpack的簡(jiǎn)單配置

2、webpack 官方 API

轉(zhuǎn)載于:https://juejin.im/post/5ad9a8496fb9a07abb2327eb

總結(jié)

以上是生活随笔為你收集整理的webpack 阅读笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。