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，显示内容如下：

运行结果1

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

#更改src/index.js

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

console.log(css);

#重新运行

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

运行结果2

#继续更改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);

#运行查看

运行结果3

我们发现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);

#运行结果

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

运行结果4

#总结

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