講下webpack如何處理css樣式文件铜犬。
git倉庫：webpack-demo
1、新建
- 進入項目中示损，在
src目錄下新建一個styles/header.css文件湖笨。
webpack-demo/chapter5
...
|- /src
|- /assets
|- content.js
|- footer.js
|- header.js
|- index.js
|- logo.js
+ |- header.css
|- index.html
|- package.json
|- webpack.config.js
...
- 里面手寫一行簡單的樣式迅栅。
/* header.css */
.header {
background: red;
}
- 在
src/header.js中給這個塊級元素添加一個.header類名小泉。
// header.js
export function createHeader() {
const div = document.createElement("div");
div.innerText = "頭部塊";
+ div.classList.add("header");
document.body.appendChild(div);
}
- 在
src/index.js模塊中引入這個header.css文件，這樣頭部塊就會應用這行樣式肢预，使其背景變?yōu)榧t色矛洞。
// index.js
import { createLogo } from "./logo";
import { createHeader } from "./header";
import { createContent } from "./content";
import { createFooter } from "./footer";
+ import "./styles/header.css";
createLogo();
createHeader();
createContent();
createFooter();
2、處理css
- 接下來我們就需要安裝相應的loader了來處理
css文件了烫映。
$ npm install style-loader css-loader --save-dev
- 安裝完成了以后我們需要在
webpack.config.js中配置它沼本。
...
module: {
rules: [
// 處理css等樣式文件
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ }
]
}
...
- 然后我們執(zhí)行命令打包，打包成功后打開
dist/index.html文件就可以看到瀏覽器中正常顯示頭部塊為紅色的背景色锭沟。
$ npm run build
3抽兆、運行機制
- 打包沒問題、瀏覽器中預覽也沒問題族淮，這時候我們就要想辫红，
style-loader和css-loader做了什么事情？ - 首先第一點我們需要知道的是祝辣，在上面
use: ["style-loader", "css-loader"]這行代碼中厉熟，在webpack中是先執(zhí)行css-loader再執(zhí)行style-loader的，也就是我們常說的较幌，webpack中執(zhí)行的順序是從下到上，從右到左白翻。 - 當遇到
.css文件的時候乍炉，先走css-loader，這個loader使你能夠使用類似@import和url(...)的方法實現(xiàn)require/import的功能滤馍。 - 再走
style-loader岛琼，它可以將編譯完成的css掛載到html中。如圖：
4巢株、小結(jié)
-
webpack中loader加載順序是從下到上槐瑞，從右到左。 -
css-loader使你能夠使用類似@import和url(...)的方法實現(xiàn)require/import的功能阁苞；style-loader可以將編譯完成的css掛載到html中困檩。 - 這兩個loader還有許多的配置項可以學習參考，大家可以去下面給的鏈接去了解那槽。
參考鏈接:
