「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」
1. style-loader 的使用
1.1 认识 style-loader
上一篇文章我们已经讲了如何通过 css-loader 来加载 css 文件，但是我们发现这个 css 文件中的样式代码最后并没有生效（页面没有效果）。
这是为什么呢？
- 因为
css-loader只负责将.css文件进行解析加载，并不会将解析后的css代码插入到页面中（把css插入到页面有两种方式：要么把所有的css代码提取到独立的.css文件中，然后通过<link>元素在html文件中将其引入；要么直接在html文件的<head>中创建<style>元素，然后把css代码写到这个<style>元素中）； - 如果我们希望再完成插入
style的操作来使css样式生效，那么我们还需要另外一个loader，就是style-loader。style-loader可以帮助我们在html中创建一个<style>元素，并把css代码放入这个<style>元素，然后插入到html中（不过style-loader并没有对css代码做提取，后面我们讲插件时再来讲对css的提取及压缩操作）；
1.2 配置 style-loader
那我们怎么使用 style-loader 呢？既然是一个 loader，那 loader 必然也是一个库，所以我们需要先用 npm 进行安装：
npm install -D style-loader
安装完后，我们赶紧去使用它，我们一般通过配置文件的方式使用它，你可能会这样做：
module.exports = {
...
module: {
rules: [
{
test: /\.css$/, // 正则表达式
use: [
'css-loader',
'style-loader'
]
}
]
}
}
先用 css-loader，再用 style-loader，这样的话不就完美了吗？那我们来执行一下 npm run build：
你会发现，打包过程报错了。为什么报错呢？我们再来看下 Rule 对象中 use 的配置，use 对应着一个数组，里面有多个 loader，那这些 loader 应该是有执行顺序的，比如我们这里的 css-loader 和 style-loader，应该是先使用 css-loader 对 css 文件进行读取，然后才能用 style-loader 把对应的 css 插入到相应的 html 文档中。但是，use 对应的数组在使用里面的 loader 时，它的执行顺序和常规的顺序不一样，其执行顺序是从后往前（从下往上或者从右往左）的，也就是说，写在后面的 loader 是先执行（加载）的。而我们这里应该是先执行 css-loader，因此，需要把 style-loader 写在 css-loader 前面：
module.exports = {
...
module: {
rules: [
{
test: /\.css$/, // 正则表达式
use: [
'style-loader',
'css-loader'
]
}
]
}
}
再来执行 npm run build 命令编译打包，就不会报错了：
来到浏览器中查看对应的页面效果：
可以看到，样式也都生效了。style-loader 的做法是将 css 通过文档样式表（将样式写在 <head> 元素的 <style> 元素中）的方式添加进来的：style-loader 在 <head> 元素中创建了一个 <style> 元素，把 css 样式塞入了这个 <style> 元素中。当然，开发中一般情况下我们会把样式提取到单独的 css 文件中，然后把它 <link> 进来，这个我们后面讲插件时再来实现。
