css-loader和style-loader关系原理及作用

用webpack打包就需要用到css-loader和style-loader，接下来让我们逐步解析两个loader的作用以及它们都做了怎样的工作

创建空项目

• 创建一个名为demo的空文件夹，这就是我们实验的项目目录
• 进入到目录下执行npm init -y

按照上述两步，我们就搭建好了最简单的项目环境了，接下来需要安装依赖包和创建源码目录

• 在项目目录创建src子目录
• 基于webpack4讲解，运行npm安装所需依赖

npm i webpack@webpack-4 webpack-dev-server@version-3 webpack-cli@4 css-loader@5 style-loader@2 html-webpack-plugin@webpack-4 -D

创建webpack.cofnig.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

创建一个src/public.css样式文件

.rect{
    background-color: red;
    width: 100px;
    height: 100px;
}

创建src/index.js程序入口文件

import './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body")[0].appendChild(div);

运行

webpack server

打开浏览器http://localhost:8080，显示内容如下：

我们点击浏览器查看源码，发现样式内容并没有应用到div上面，原因是css-loader只是帮我们解析了css文件里面的代码，默认webpack是只解析js代码的，所以想要应用样式我们要把解析完的css代码拿出来加入到style标签中。

更改src/index.js

// 打印到浏览器控制台，看一下导入的css文件究竟是什么
import css from './public.css';

console.log(css);

重新运行

我们发现原来获取的css竟然是一个js对象，这就是css-loader帮助我们编译时进行的转换工作

继续更改src/index.js代码

// 这次我们将css-loader解析的js对象中的css样式挂载到head的style标签中
import css from './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";

let body = document.getElementsByTagName("body")[0];

let style = document.createElement("style");
style.innerText = css[0][1];

body.appendChild(style);
body.appendChild(div);

运行查看

我们发现style的样式被成功应用到div上面了，这是我们手动挂载css-loader解析的内容到style标签下，并且将style标签加入到html文档中，但是这样手动做很麻烦，所以就有了style-loader

引入style-loader

如果你看懂我上面说的，那么你应该已经猜测到了style-loader作用了，style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中，我们来看一下

修改webpack.cofnig.js配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
+                   'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

继续更改src/index.js代码

去掉手动挂载样式

import './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body")[0].appendChild(div);

运行结果

我们发现和之前的手动挂载一样

总结

• css-loader帮助我们解析css成为js对象
• sytle-loader可以从css-loader解析的对象中提取css样式挂载到页面当中