1. 程式人生 > >webpack教程——css的加載

webpack教程——css的加載

OS 重復 pre dex 請求 式表 bpa htm uil

首先要安裝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的加載