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 文件, 这样头部块就会应用这行样式, 使其背景变为红色.
- // 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"]
- + }
- ]
- }
- ...
然后我们执行命令打包, 打包成功后打开 dist/index.HTML 文件就可以看到浏览器中正常显示头部块为红色的背景色.
$ NPM run build
3, 运行机制
打包没问题, 浏览器中预览也没问题, 这时候我们就要想, 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 中. 如图:
4, 小结
webpack 中 loader 加载顺序是从下到上, 从右到左.
CSS-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require/import 的功能; style-loader 可以将编译完成的 CSS 挂载到 HTML 中.
这两个 loader 还有许多的配置项可以学习参考, 大家可以去下面给的链接去了解.
参考链接:
- webpack CSS-loader
- webpack style-loader
来源: http://www.jianshu.com/p/045cbe175e68