[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/