標籤:content 實驗 紅色 樣式 狀態 http 元素 .class extract
首先要安裝css的loader
npm install css-loader style-loader --save-dev
然後在webpack.config.js中配置如下代碼
意思是先用css-loader載入css檔案,再用style-loader添加在頁面中
在app目錄下建立component.css檔案
body{ background-color: red;}
在app/index.js中引入css檔案
運行npm run start命令。
可以看到我們瀏覽器整個背景都變成了紅色。
webpack做了什麼呢?
看到build/app.js中有如下代碼。
再看下我們生產的index.html檔案
奇怪了,並沒有內斂樣式也沒有引入的css檔案,那瀏覽器是為什麼變紅的呢?
我們在瀏覽器中開啟調試工具。
原來樣式在這!
webpack動態添加了內斂樣式在代碼中。
如果多人協作開發的情況下,會有很大可能出現代碼命名重複的情況,如果出現這種情況怎麼辦呢?
來讓我們實驗一下。
在app目錄下添加兩個css檔案,style1.css
body{ background-color: red;}.class1{
color: green;}
和style2.css
body{ background-color: black;}.class1{ color: blue;}
在index.js中引入這兩個檔案
修改component.js檔案,使其給元素添加傳入的類名
在webpack.config.js中添加如下配置
我們執行npm run start 命令若看到
即為打包成功。
開啟瀏覽器http://localhost:8080/
可以看到同樣的類名都正常顯示出來了,看下右邊的文檔結構,發現我們的類名不是class1了。
原來CSS Modules對我們的類名做了雜湊處理,我們再也不用擔心同事跟我們有相同的命名了。
是不是很方便呢?
讓我們再來面對另一個問題,現在這種情況下css是js動態添加上去的,如果當js檔案有一個長時間的阻塞事件,頁面將會處於長時間的無樣式的狀態。
這是我們不希望看到的,怎麼把css檔案和js檔案分離呢?
首先我們需要安裝一個外掛程式
npm install extract-text-webpack-plugin --save-dev
安裝成功之後在webpack.config.js中添加如下配置
完成之後運行一下npm run start
開啟瀏覽器http://localhost:8080/
可以看到我們兩個css檔案合并為一個app.css檔案並以外部樣式表的形式載入。
而且css檔案比js檔案要先請求,這樣就避免頁面會出現FOUC-Flas Of Unstyle Content無樣式內容閃爍。
webpack關於css的載入就講到這裡。
webpack教程(四)——css的載入