css-loader

让webpack可以解析css

webpack官方文档： https://webpack.docschina.org/concepts/loaders/

将wepback文件夹变成一个包管理器(加入package.json文件)，npm init 或者 npm init --y

npm初始化博客： https://www.cnblogs.com/WD-NewDemo/p/11141384.html

1.1 安装： npm install --save-dev css-loader

1.2 在app.js中引入css文件

import css from "file.css";

1.3 配置你的webpack文件

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"], // use底层是一个栈结构，后进先出，后面的loader先执行
      },
    ],
  },
};

style-loader的工作原理：创建style标签， 将css-laoder执行之后的结果（css字符串），插入到style标签中然后将style标签插入html中，可以运行之后查看DOM元素

测试：

在webpack 目录下新建css文件夹，在css文件夹建立index.css，之后运行index.html看是否成功