讲下webpack如何处理css样式文件。 git仓库:webpack-demo
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
文件,这样头部块就会应用这行样式,使其背景变为红色。// 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();
css
文件了。$ npm install style-loader css-loader --save-dev
webpack.config.js
中配置它。...
module: {
rules: [
// 处理css等样式文件
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ }
]
}
...
dist/index.html
文件就可以看到浏览器中正常显示头部块为红色的背景色。$ npm run build
style-loader
和css-loader
做了什么事情?use: ["style-loader", "css-loader"]
这行代码中,在webpack中是先执行css-loader
再执行style-loader
的,也就是我们常说的,webpack中执行的顺序是从下到上,从右到左。.css
文件的时候,先走css-loader
,这个loader使你能够使用类似@import
和url(...)
的方法实现require/import
的功能。style-loader
,它可以将编译完成的css挂载到html中。如图:
webpack
中loader
加载顺序是从下到上,从右到左。css-loader
使你能够使用类似@import
和url(...)
的方法实现require/import
的功能;style-loader
可以将编译完成的css挂载到html中。参考链接: