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

创建空项目

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

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

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

复制 1npm 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

复制 1const HtmlWebpackPlugin = require('html-webpack-plugin');
 2
 3module.exports = {
 4  module: {
 5    rules: [
 6      {
 7        test: /.css$/,
 8        use: [
 9          'css-loader'
10        ]
11      }
12    ]
13  },
14  plugins: [
15    new HtmlWebpackPlugin()
16  ]
17}

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

复制 1.rect{
 2  background-color: red;
 3  width: 100px;
 4  height: 100px;
 5}

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

复制 1import './public.css';
 2
 3let div = document.createElement("div");
 4div.className = "rect";
 5div.innerText = "hello div";
 6document.getElementsByTagName("body")[0].appendChild(div);

运行

复制 1webpack server

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

运行结果1

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

更改src/index.js

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

重新运行

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

运行结果2

继续更改src/index.js代码

复制 1// 这次我们将css-loader解析的js对象中的css样式挂载到head的style标签中
 2import css from './public.css';
 3
 4let div = document.createElement("div");
 5div.className = "rect";
 6div.innerText = "hello div";
 7
 8let body = document.getElementsByTagName("body")[0];
 9
10let style = document.createElement("style");
11style.innerText = css[0][1];
12
13body.appendChild(style);
14body.appendChild(div);

运行查看

运行结果3

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

引入style-loader

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

修改webpack.cofnig.js配置

复制 1const HtmlWebpackPlugin = require('html-webpack-plugin');
 2
 3module.exports = {
 4  module: {
 5    rules: [
 6      {
 7        test: /.css$/,
 8        use: [
 9          'style-loader',
10          'css-loader'
11        ]
12      }
13    ]
14  },
15  plugins: [
16    new HtmlWebpackPlugin()
17  ]
18}

继续更改src/index.js代码

去掉手动挂载样式

复制 1import './public.css';
 2
 3let div = document.createElement("div");
 4div.className = "rect";
 5div.innerText = "hello div";
 6document.getElementsByTagName("body")[0].appendChild(div);

运行结果

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

运行结果4

总结

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