webpack只能解析js文件，所以css文件我们需要用加载器loader来解析
npm install --save-dev css-loader
npm install style-loader
用上述两个命令安装style-loader和css-loader依赖；
css-loader：将css资源编译成commonjs的模块到js中
style-loader：将js中的css通过创建style标签的形式添加到html文件中生效
在webpack.config.js配置文件中我们如下配置
const path = require('path');
module.exports = {
// 入口
entry: './src/main.js', // 相对路径
//输出
output: {
// 文件的输出路径
// __dirname nodejs的变量，代表当前文件的文件夹目录
path: path.resolve(__dirname, 'dist'), // 绝对路径
// 文件名
filename: 'main.js'
},
// 加载器（loader）
module: {
rules: [
// loader的配置
{
test: /\.css$/, // 只检测.css结尾的文件
use: [
"style-loader", // 将js中css通过创建style标签添加到html文件中生效
"css-loader", // 将css资源编译成commonjs的模块到js中
] // 顺序从右到左 或 从下到上，先执行css-loader，再执行style-loader
}
],
},
// 插件
plugins: [
// plugin插件的配置
],
// 模式
mode: 'development'
}
注意！
加载器module-rules的配置中
test用于检测文件是否是以.css结尾的文件
use是一个数组，里面添加"style-loader"和"css-loader";
这个数组的执行顺序是从右向左或从下到上，所以要先执行css-loader，再执行style-loader
还需注意的一点是：如果写了css文件，但是未引入，webpack在打包时并不会编译该css；同理js文件也是
依赖未安装的报错
引入css
编译后的结果
