細(xì)版：

1、瀏覽器會(huì)開(kāi)啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求，對(duì) URL 分析判斷，如果是 http 協(xié)議就按照 Web 方式來(lái)處理;

2、調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法，比如 WebView 中的 loadUrl 方法;

3、通過(guò)DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個(gè)GET請(qǐng)求;

4、進(jìn)行HTTP協(xié)議會(huì)話，客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭);

5、進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務(wù)器;

6、進(jìn)入部署好的后端應(yīng)用，如 PHP、Java、JavaScript、Python 等，找到對(duì)應(yīng)的請(qǐng)求處理;

7、處理結(jié)束回饋報(bào)頭，此處如果瀏覽器訪問(wèn)過(guò)，緩存上有對(duì)應(yīng)資源，會(huì)與服務(wù)器最后修改時(shí)間對(duì)比，一致則返回304;

8、瀏覽器開(kāi)始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)，同時(shí)使用緩存;

9、文檔樹(shù)建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類(lèi)型的文件（比如css、js）,同時(shí)設(shè)置了cookie;

10、頁(yè)面開(kāi)始渲染DOM，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等，頁(yè)面顯示完成。

簡(jiǎn)潔版：

瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；

服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；

瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語(yǔ)法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；

載入解析到的資源文件，渲染頁(yè)面，完成。

先要安裝css的loader

npm install css-loader style-loader --save-dev

然后在webpack.config.js中配置如下代碼

意思是先用css-loader加載css文件，再用style-loader添加在頁(yè)面中

在app目錄下創(chuàng)建component.css文件

body{
 background-color: red;
}

在app/index.js中引入css文件

運(yùn)行npm run start命令。

可以看到我們?yōu)g覽器整個(gè)背景都變成了紅色。

webpack做了什么呢？

看到build/app.js中有如下代碼。

再看下我們生產(chǎn)的index.html文件

奇怪了，并沒(méi)有內(nèi)斂樣式也沒(méi)有引入的css文件，那瀏覽器是為什么變紅的呢？

我們?cè)跒g覽器中打開(kāi)調(diào)試工具。

原來(lái)樣式在這！

webpack動(dòng)態(tài)的添加了內(nèi)斂樣式在代碼中。

如果多人協(xié)作開(kāi)發(fā)的情況下，會(huì)有很大可能出現(xiàn)代碼命名重復(fù)的情況，如果出現(xiàn)這種情況怎么辦呢？

來(lái)讓我們?cè)囼?yàn)一下。

在app目錄下添加兩個(gè)css文件，style1.css

body{
 background-color: red;
}.class1{
color: green;
}

和style2.css

body{
 background-color: black;
}.class1{
 color: blue;
}

在index.js中引入這兩個(gè)文件

修改component.js文件，使其給元素添加傳入的類(lèi)名

在webpack.config.js中添加如下配置

我們執(zhí)行npm run start 命令若看到

即為打包成功。

打開(kāi)瀏覽器http://localhost:8080/

可以看到同樣的類(lèi)名都正常顯示出來(lái)了，看下右邊的文檔結(jié)構(gòu)，發(fā)現(xiàn)我們的類(lèi)名不是class1了。

原來(lái)CSS Modules對(duì)我們的類(lèi)名做了哈希處理，我們?cè)僖膊挥脫?dān)心同事跟我們有相同的命名了。

是不是很方便呢？

讓我們?cè)賮?lái)面對(duì)另一個(gè)問(wèn)題，現(xiàn)在這種情況下css是js動(dòng)態(tài)添加上去的，如果當(dāng)js文件有一個(gè)長(zhǎng)時(shí)間的阻塞事件，頁(yè)面將會(huì)處于長(zhǎng)時(shí)間的無(wú)樣式的狀態(tài)。

這是我們不希望看到的，怎么把css文件和js文件分離呢？

首先我們需要安裝一個(gè)插件

npm install extract-text-webpack-plugin --save-dev

安裝成功之后在webpack.config.js中添加如下配置

完成之后運(yùn)行一下npm run start

打開(kāi)瀏覽器http://localhost:8080/

可以看到我們兩個(gè)css文件合并為一個(gè)app.css文件并以外部樣式表的形式加載。

而且css文件比js文件要先請(qǐng)求，這樣就避免頁(yè)面會(huì)出現(xiàn)FOUC-Flas Of Unstyle Content無(wú)樣式內(nèi)容閃爍。

webpack關(guān)于css的加載就講到這里。