webpack之rules规则

本文主要对webpack配置module的rules是条件匹配详解

第一条：exclude 、 include 、 test

一个loader的配置，一般一个test就够了，多的话也就一个test加上include或者exclude，如果exclude 、 include 、 test万一出现了三个在同一个loader的配置中时，优先级：
exclude > include > test

第二条：loader配置方式

module.rules 的value是数组，允许你在 webpack 配置中指定多个 loader。
loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。查看 loader 功能章节，了解有关 loader 顺序的更多信息。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true // 开启css模块化
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

第三条：css模块化

1、如何使css模块化？需要在我们的webpack.config.js中对css-loader进行一些额外设置，上面示例中有，详细参考css-loader

2、如何开启单个样式文件的全局模式呢？
可以在webpack.config.js中配置两次处理css的loader，配置如下：

module: {
    rules: [
      {
        test: /\.css$/, // 第二次
        use: ["style-loader", {
          loader: "css-loader",
          options: {
            modules: true // 开启css模块化
          }
        }],
        include: [
          // src/components/目录下的css是模块化的，其之外的css是全局的
          path.resolve(__dirname, 'src/components')
        ]
      },
      {
        test: /\.css$/, // 第一次
        use: ["style-loader", "css-loader"],
        exclude: [
          // 除了src/components/目录下的css，在其之外的css是全局的
          path.resolve(__dirname, 'src/components'),
        ]
      },

js中引入css
const styles = require('./popup.css');
打印styles对象，是这样的

image.png

3、如何让css模块化后生成的class具有可读性？
配置webpack.config.js中css-loader的localIdentName：

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", {
          loader: "css-loader",
          options: {
            modules: {
              // 默认是hash:base64
              localIdentName: "[path][name]__[local]--[hash:base64:5]",
            },
          }

打印styles对象，是这样的

image.png

最后编辑于：2021.04.05 21:22:34