webpack5 如何开启css Modules

webpack 和webpack-cli 版本为

首先我们的配置是基于自己手动配置。

 "webpack": "^5.68.0",
 "webpack-cli": "^4.9.2",

首先介绍一下什么是css Modules 很明显css模块化 那什么是css模块又为什么要模块化呢？

1、 css 模块

将css分不同模块打包，各个模块之间互不干扰，不影响。

2、 为什么要模块化

因为使用css类的时候文档明确说明类名不可重复，样式会覆盖。所以需要css 模块化。

3、 配置

在我们的module配置中一定写了如下配置，这里默认你已经掌握：

1. 匹配css文件后缀使用 style-loader 和 css-loader
2. 匹配less文件后缀使用 style-loader 和 css-loader 和 less-loader
3. 匹配scss文件后缀使用 style-loader 和 css-loader 和 sass-loader

1、 第一种方法

好。接下来修改css-loader配置 把css-loader使用如下方式替换掉：

注意注意注意：如果你使用了第三方UI库(比如antd) 请 不要在匹配css文件的css-loader替换 原因原因原因 因为antd中引入的样式是css文件，所以不能在匹配css文件中开始modules。否则会无法识别渲染。

官网例子：这种配置会生成一堆编码，开发者想要知道样式名字很费时间，所以我修改了一下

 {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
    },
  },

优化后的例子： local表示自己定义的类名，后面增加5位hash值 ，这样只需要看local值就可以了。

{
    loader: 'css-loader',
    options: {
      modules: {
        importLoaders: 1,
        localIdentName: '[local]_[hash:base64:5]', 
      },
    },
  },
  
  

2、 第二种方法

如果你不想单独写css文件的loader。你可以这样开启css-modules

 {
    loader: 'css-loader',
    options: {
      importLoaders: 1,
      modules: {
        auto: (resourcePath) => resourcePath.endsWith('.less'),  // 匹配.less文件来进行css模块化。
        localIdentName: '[local]_[hash:base64:10]',
      },
    },
  },