在Webpack 5 中如何进行 CSS 常用配置？

本文摘要：主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤

前文已谈到可以通过配置 css-loader 和 style-loader，使 webpack5 具有处理 CSS 资源的能力。css-loader 首先会分析出各个 CSS文件之间的关系，把各个CSS文件合并为一大段 CSS，然后将 CSS 文件编译为 CommonJS 模块，并把该模块引入到 JS 中。紧接着 style-loader 会从 JS 中提取出刚才引入的编译后的 CSS，在页面的 header 中创建 style 标签，并插入该css。

1 提取 CSS 文件

上述配置打包后的资源，在浏览器中运行时，首先会加载 JS 文件，之后才会创建 style 标签来插入样式，很多情况下会出现闪屏现场，导致用户体验不好。这时候可通过配置 mini-css-extract-plugin 插件来提升用户体验，该插件可以提取出独立的 CSS 文件，通过 link 标签加载样式。

插件官网：https://webpack.js.org/plugins/mini-css-extract-plugin/

1.1 安装依赖

安装 mini-css-extract-plugin 为开发依赖：

yarn add mini-css-extract-plugin -D

1.2 修改 webpack 配置

修改 webpack.config.js 文件：

1）引入插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

2）修改 loader 配置：将 module.rules 中所有 style-loader 替换为该插件提供的loader：MiniCssExtractPlugin.loader，如：

//...
module: {
   
  rules: [
    {
   
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    },
    {
   
      test: /\.s[ca]ss$/,
      use: