CSS 模块化方案的配置文件

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

首先使用 sass-loader将 Sass 文件编译成 CSS 文件，然后使用 postcss-loader 处理 CSS 文件中的浏览器兼容性问题，并使用 css-loader 解析 CSS样式表中的 @import 和 url() 语句。最后使用style-loader 将 CSS 样式表直接加载到 DOM 中的 <style/> 中

重大知识点

loader 从下向上执行 !!!

解析

• css-loader css module hash 命名生成规则，官方建议配置

 options: { modules: { localIdentName: "[path][name]__[local]--[hash:base64:5]", }, }

base64 生成的 hash 有 五 位，这可以通过看线上的代码进行验证

• css-loader 中引用其他 loader
  生产环境的构建将 CSS 从 bundle 中分离出来。mini-css-extract-plugin & style-loader
  ⚠️ 不要同时使用上面那两个loader哈!!!
• css-loader的作用主要是解析 css 文件中的 @import 和 url 语句，处理css-modules，并将结果作为一个 js 模块返回
• style-loader 在DOM中插入一个<style />标签，然后将 CSS 写入这个标签
• postcss-loader 这个 loader的强大在于他的 plugin，增加CSS前缀，并进行压缩

使用 auto-prefixer 添加厂商前缀；想处理写在 JS 中的样式 postcss-js parser

• scss-loader 编译成标准的 CSS ，处理变量，嵌套，继承

• miniCssExtractPlugin

plugins:[newMiniCssExtractPlugin({filename:isProductionMode?'[name].[contenthash].css':'[name].css',}),]