webpack（5）webpack处理css文件

css文件处理-准备工作

(以下项目配置都是基于上一篇webpack(4)的基础上)

在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。

这里我们就在src目录中创建一个normal.css文件，代码如下：

body{
    background-color: aqua;
}

代码很简单，就是将body设置一个背景颜色，但是此时样式是不会生效的，因为我们根本没有引用它，所以我们需要在入口main.js中引入css

// 引用css文件
require('./css/normal.css')

安装loader并配置

准备工作处理完后，我们需要安装2个loader

• style-loader 将模块导出的内容作为样式并添加到 DOM 中
• css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

安装命令如下：

npm install --save-dev style-loader css-loader

安装完成后我们还需要在webpack.config.js文件中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

注意：这里use列表中的2个loader顺序是不能互换的，因为loader 是从右到左（或从下到上）地取值(evaluate)/执行(execute)。所以上面的示例是先执行css-loader加载样式文件后，再执行style-loader

实践结果

最后我们使用npm run build就可以打包成功，然后访问index.html，页面呈现的颜色就是我们normal.css样式中设置的颜色