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

1.样式loader在webpack中的使用

module.exports = {
  module: {
    rules: [
      {
                test: /\.css|less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    //引入postcss,这个放在less-loader之前,css-loader之后
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            //兼容每种浏览器的最新两个版本
                                            browsers: "last 2 versions",
                                        },
                                    ],
                                ],
                            },
                        },
                    },
                    "less-loader",
                ],
            },
    ],
  },
};

• less-loader：
  将类css代码转为真正的css代码
• postcss-loader：
  将某些高版本语法的css代码转为低版本语法的css代码,来兼容不同浏览器
• css-loader：
  处理CSS文件，支持模块化、压缩和文件导入等功能,通常与style-loader一起使用‌。
• style-loader
  创建style标签,使用<style>将css-loader内部样式注入到我们的HTML页面

关于less-loader/sass-loader和postcss-loader应该很好理解。下面主要分析分析css-loader和style-loader。

2.css-loader

下面以一个例子来说明问题。

创建一个名字任意的空文件夹,进到目录下执行npm init -y,在项目目录创建src子目录,安装相关依赖:

npm i webpack webpack-cli webpack-dev-server  html-webpack-plugin css-loader style-loader -D

创建webpack.config.js文件:

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

module.exports = {
    mode:"development",
    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 world!!!";
document.getElementsByTagName("body")[0].appendChild(div);

执行npx webpack serve运行项目:

我们点击浏览器查看源码，发现样式内容并没有应用到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 world!!!";

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。

3.style-loader

style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中，我们来看一下。

修改webpack.config.js配置:

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

module.exports = {
    mode:"development",
    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 world!!!";
document.getElementsByTagName("body")[0].appendChild(div);

重启项目(修改了配置文件之后需要重新运行项目),运行结果：

然后我们右键检查页面元素，会发现在主页面html的头部head里面多了一个style:

4.总结

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