[webpack]——loader配置

前言

　　当我们需要配置 loader 时，都是在 module.rules 中添加新的配置项，在该字段中，每一项被视为一条匹配使用 loader 的规则。

看一下基础实例：

module.exports = {
  // ...
  module: {
    rules: [ 
      {
        test: /\.jsx?/, // 条件
        include: [ 
          path.resolve(__dirname, 'src'),
        ], // 条件
        use: 'babel-loader', // 规则应用结果
      }, // 一个 object 即一条规则
      // ...
    ],
  },
}

loader 的匹配规则中有两个最关键的因素：一个是匹配条件，一个是匹配规则后的应用。

接下来对一些关键字解析一下啦~

规则条件配置

• { test: ... } 匹配特定条件
• { include: ... } 匹配特定路径
• { exclude: ... } 排除特定路径
• { and: [...] }必须匹配数组中所有条件
• { or: [...] } 匹配数组中任意一个条件
• { not: [...] } 排除匹配数组中所有条件

也就可以是以下的理解

1. 字符串：必须以提供的字符串开始，所以是字符串的话，这里我们需要提供绝对路径
2. 正则表达式：调用正则的 test 方法来判断匹配
3. 函数：(path) => boolean，返回 true 表示匹配
4. 数组：至少包含一个条件的数组
5. 对象：匹配所有属性值的条件

简单的例子理解一下

rules: [
  {
    test: /\.jsx?/, // 正则
    include: [
      path.resolve(__dirname, 'src'), // 字符串，注意是绝对路径
    ], // 数组
    // ...
  },
  {
    test: {
      js: /\.js/,
      jsx: /\.jsx/,
    }, // 对象，不建议使用
    not: [
      (value) => { /* ... */ return true; }, // 函数，通常需要高度自定义时才会使用
    ],
  },
],

嘿哈，以上的配置差不多很日常了，再说一个官方例子

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

module type

{
  test: /\.js/,
  include: [
    path.resolve(__dirname, 'src'),
  ],
  type: 'javascript/esm', // 这里指定模块类型
},

上述做法是可以帮助你规范整个项目的模块系统，但是如果遗留太多不同类型的模块代码时，建议还是直接使用默认的 javascript/auto。

后言

　　想了解更多的可以认真读一遍官方文档

　　官方链接：https://webpack.docschina.org/concepts/loaders/