在之前的文章中我们利用webpack自带的js资源加载模块将js文件打包，因此不需要手动安装。但是webpack只内置了js文件的资源加载模块，如果要加载css文件需要手动引入相应的资源加载模块。
引入css-loader
通过yarn add css-loader --dev安装
安装完成过后我们在src目录下新建一个index.css文件，随便设置几个属性
```
body { margin: 0 auto; padding: 0 20px; max-width: 800px; background: #f4f8fb;}```
然后我们在webpack.config.js文件中将入口文件修改为index.css
到这里，我们先不使用css-loader来执行打包，在终端输入yarn webpack，会报出一个错误
这个错误意思是模块解析失败，我们可能需要一个loader来处理css类型的文件
下面我们在webpack.config.js文件中去使用我们安装的css-loader文件
```javascript
const path = require('path')
module.exports = {
mode: 'none',
entry: "./src/index.css", //入口文件
output: {
filename: "bundle.js", //文件名称
path: path.join(__dirname, "output") //输出目录
},
module: {
rules: [
{
test: /\.css$/, //使用正则表达式匹配.css文件
use: 'css-loader'
}
]
}}
```
rules属性需要使用数组，因为我们还会有其他loader需要使用。数组的元素是对象，test属性是我们要打包的文件类型，这里使用正则表达式匹配以.css结尾的文件，use属性是要使用的loader。
我们在终端再次执行打包操作，这次打包就不回报上次那个错误了，然后我们使用serve .来看一下页面是否有使用到我们的css属性
从这里可以看到body里面并没有我们写的属性，这是因为我们打包过后的css代码只是被push到了一个数组中，但是并没有任何地方引用到，我们还需要一个style-loader，将css代码以style标签的形式添加到html代码中。
引入style-loader模块
通过yarn add style-loader --dev安装，安装过后到我们的webpack.config.js文件去使用
```
const path = require('path')
module.exports = {
mode: 'none',
entry: "./src/index.css", //入口文件
output: {
filename: "bundle.js", //文件名称
path: path.join(__dirname, "output") //输出目录
},
module: {
rules: [
{
test: /\.css$/, //使用正则表达式匹配.css文件
use: ['style-loader','css-loader']
}
]
}}
```
终端输入yarn webpack，打包完成之后，输入serve .启动浏览器，下面是最终结果
可以看到我们的css代码被添加到了head标签里面，body也有了我们写的属性
以上只是演示加载资源模块的方式，也是为了说明loader是webpack的核心特性，借助loader就可以加载任何类型的资源。
正常情况下项目的入口文件都是js文件，因为整个前端应用是由JavaScript驱动的，而css文件我们只需要通过import的方式就可以打包到js代码里面，下面我们将入口文件修改为src目录下的index.js。然后在index.js中导入index.css文件
```
import createHeading from './heading.js'
import './index.css'
const heading = createHeading()
document.body.append(heading)
```
为了能明显看到效果，我们创建一个heading.css文件，代码如下：
```
.heading {
padding: 20px;
background: #343a40;
color: #fff;
}
```
然后在heading.js中引入
```
import './heading.css';
export default () => {
const element = document.createElement('h2')
element.textContent = 'Hello world'
element.classList.add('heading');
element.addEventListener('click', () => {
alert('Hello webpack')
})
return element
}
```
然后执行yarn webpack，打包完成之后执行serve .
打开链接可以看到我们的css样式已经添加到页面中
