模块#

用于决定如何处理项目中不同类型的模块。

• 类型: Object
• 默认: {}

module.defaultRules#

• 类型: Rule[]

默认情况下对模块应用的一组规则。

查看 源代码 获取详细信息。

module.exports = {
  module: {
    defaultRules: [
      '...', // you can use "..." to reference those rules applied by webpack by default
    ],
  },
};

module.noParse#

• 类型: string | string[] | RegExp | RegExp[] | ((request: string) => boolean)
• 默认: undefined

保持匹配模块的模块机制原样，例如 module.exports、require、import。

当用于忽略没有外部依赖的库时，它很有用，并且可以提高构建性能。

注意：这些模块仍将由配置的加载器处理。

module.exports = {
  module: {
    noParse: /typescript|watermark-dom/,
  },
};

module.exports = {
  module: {
    noParse: [require.resolve('typescript'), /watermark-dom/],
  },
};

module.exports = {
  module: {
    noParse: request => /typescript|watermark-dom/.test(request),
  },
};

module.parser#

• 类型: Object
• 默认: {}

使用 module.parser 在一个地方配置所有解析器的选项。

module.exports = {
  module: {
    parser: {
      // Parser options for asset modules
      asset: {
        dataUrlCondition: {
          maxSize: 16192,
        },
      },
      // Parser options for javascript modules
      javascript: {
        dynamicImportMode: 'lazy',
        dynamicImportPrefetch: false,
        dynamicImportPreload: false,
        url: true,
        importMeta: true,
      },
      // Parser options for CSS modules
      css: {
        namedExports: true,
      },
      // Parser options for css/auto modules
      'css/auto': {
        namedExports: true,
      },
      // Parser options for css/module modules
      'css/module': {
        namedExports: true,
      },
    },
  },
};

module.parser.asset#

asset 模块的解析器选项。

module.parser.asset.dataUrlCondition#

• 类型: { maxSize: number }
• 默认: { maxSize: 8096 }

如果模块大小小于或等于 maxSize，则模块将被 Base64 编码，否则将创建一个文件。此选项只能用于 Asset Module 场景。

module.exports = {
  module: {
    parser: {
      asset: {
        dataUrlCondition: {
          // Modules' size smaller than or equal to 4KB and ending with `.png` will be Base64 encoded.
          maxSize: 4 * 1024,
        },
      },
    },
  },
};

module.parser.javascript#

javascript 模块的解析器选项。

module.parser.javascript.dynamicImportMode#

• 类型: 'lazy' | 'eager' | 'weak' | 'lazy-once'
• 默认:'lazy'

指定动态导入的全局模式，查看 webpackMode 获取更多详细信息。

module.parser.javascript.dynamicImportPrefetch#

• 类型: boolean | number
• 默认:false

指定动态导入的全局预取，查看 webpackPrefetch 获取更多详细信息。

module.parser.javascript.dynamicImportPreload#

• 类型: boolean | number
• 默认:false

指定动态导入的全局预加载，查看 webpackPreload 获取更多详细信息。

module.parser.javascript.dynamicImportFetchPriority#

• 类型: 'low' | 'high' | 'auto'
• 默认:'auto'

指定动态导入的全局 fetchPriority，查看 webpackFetchPriority 获取更多详细信息。

module.parser.javascript.url#

• 类型: true | false | 'relative'
• 默认:true

启用对 new URL() 语法的解析。

当使用 'relative' 时，Rspack 将为 new URL() 语法生成相对 URL，即结果 URL 中不包含基本 URL

<!-- with 'relative' -->
<img src="icon.svg" />

<!-- without 'relative' -->
<img src="file:///path/to/project/dist/icon.svg" />

module.parser.javascript.exprContextCritical#

• 类型: boolean | undefined
• 默认:true

启用对完全动态依赖项 (import(variable)) 的警告。

module.parser.javascript.wrappedContextCritical#

• 类型: boolean | undefined
• 默认:false

启用对部分动态依赖项 (import("./path/to/" + variable)) 的警告。

module.parser.javascript.wrappedContextRegExp#

• 类型: RegExp | undefined
• 默认值:/.*/

设置一个正则表达式来匹配包装的动态依赖项。

module.parser.javascript.importMeta#

• 类型: boolean
• 默认:true

启用或禁用评估 import.meta。

module.parser.javascript.exportsPresence#

• 类型: 'error' | 'warn' | 'auto' | false
• 默认:'auto'

对使用不存在的导出和冲突的重新导出发出警告或错误。

• "error": 报告错误。
• "warn": 报告警告。
• "auto": 根据模块是否为严格 ESM，如果是则给出错误，否则给出警告。
• false: 禁用此功能。

module.parser.javascript.importExportsPresence#

• 类型: 'error' | 'warn' | 'auto' | false

对使用不存在的导出发出警告或错误，默认为 module.parser.javascript.exportsPresence 的配置。

module.parser.javascript.reexportExportsPresence#

• 类型: 'error' | 'warn' | 'auto' | false

对冲突的重新导出发出警告或错误，默认为 module.parser.javascript.exportsPresence 的配置。

module.parser.javascript.strictExportPresence#

• 类型: boolean

当导入的名称在导入的模块中不存在时，发出错误而不是警告。

module.parser.javascript.worker#

• 类型: string[] | boolean

为 Worker 解析提供自定义语法，通常用于支持 Worklet

module.exports = {
  module: {
    parser: {
      javascript: {
        worker: [
          // Supports CSS paintWorklet
          'CSS.paintWorklet.addModule()',
          // Supports AudioWorklet, with the leading '*' indicating the recognition of a variable named 'context', for example:
          // let context = new AudioContext();
          // await context.audioWorklet.addModule(new URL("noise-processor.js", import.meta.url));
          '*context.audioWorklet.addModule()',
          // Extends default syntax: ["Worker", "SharedWorker", "navigator.serviceWorker.register()", "Worker from worker_threads"]
          '...',
        ],
      },
    },
  },
};

module.parser.javascript.overrideStrict#

• 类型: 'strict' | 'non-strict'

将模块覆盖为严格或非严格。

这可能会影响模块的行为（严格和非严格之间的一些行为不同），因此请谨慎配置此选项。

module.parser["javascript/auto"]#

javascript/auto 模块的解析器选项，与 javascript 解析器选项 相同。

module.parser["javascript/dynamic"]#

javascript/dynamic 模块的解析器选项，与 javascript 解析器选项 相同。

module.parser["javascript/esm"]#

javascript/esm 模块的解析器选项，与 javascript 解析器选项 相同。

module.parser["css/auto"]#

css/auto 模块的解析器选项。

module.parser["css/auto"].namedExports#

• 类型: boolean
• 默认值: true

为 CSS 导出使用 ES 模块命名导出。

使用 namedExports: true 时，可以使用命名空间导出或命名导出

// namespace export
import * as classes from './index.module.css';
// named export
import { class1, class2 } from './index.module.css';

使用 namedExports: false 时，除了命名空间导出和命名导出之外，还可以使用默认导出

// namespace export
import * as classes from './index.module.css';
// named export
import { class1, class2 } from './index.module.css';
// default export
import classes from './index.module.css';
// default export and named export
import classes, { class1, class2 } from './index.module.css';

module.parser.css#

css 模块的解析器选项。

module.parser.css.namedExports#

与 module.parser["css/auto"].namedExports 相同。

module.parser["css/module"]#

css/module 模块的解析器选项。

module.parser["css/module"].namedExports#

与 module.parser["css/auto"].namedExports 相同。

module.generator#

• 类型: Object
• 默认: {}

使用 module.generator 在一个地方配置所有生成器的选项。

module.exports = {
  module: {
    generator: {
      // Generator options for asset modules
      asset: {
        dataUrl: {
          encoding: false,
          mimetype: 'base64',
        },
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for asset/inline modules
      'asset/inline': {
        dataUrl: {
          encoding: false,
          mimetype: 'base64',
        },
      },
      // Generator options for asset/resource modules
      'asset/resource': {
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for css/auto modules
      'css/auto': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for `css` modules
      css: {
        exportsOnly: false,
        esModule: true,
      },
      // Generator options for css/module modules
      'css/module': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
    },
  },
};

module.generator.asset#

asset 模块的生成器选项。

module.generator.asset.dataUrl#

• 类型: Object | (options: { content: string, filename: string }) => string
• 默认: {}

仅适用于模块类型为 'asset' 或 'asset/inline' 的模块。

module.exports = {
  module: {
    generator: {
      asset: {
        dataUrl: {
          encoding: 'base64',
          mimetype: 'mimetype/png',
        },
      },
    },
  },
};

当用作函数时，它会为每个模块执行并必须返回一个 data URI 字符串。

module.exports = {
  //...
  module: {
    generator: {
      asset: {
        dataUrl: ({ content }) => {
          const svgToMiniDataURI = require('mini-svg-data-uri');
          return svgToMiniDataURI(content);
        },
      },
    },
  },
};

module.generator.asset.dataUrl.encoding#

• 类型: false | 'base64'
• 默认值: 'base64'

当设置为 'base64' 时，模块源代码将使用 Base64 算法进行编码。将编码设置为 false 将禁用编码。仅适用于模块类型为 'asset' 或 'asset/inline' 的模块。

module.generator.asset.dataUrl.mimetype#

• 类型: string
• 默认值: require('mime-types').lookup(ext)

data URI 的 mimetype。默认情况下从模块资源扩展名解析。仅适用于模块类型为 'asset' 或 'asset/inline' 的模块。

module.generator.asset.filename#

• 类型: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• 默认: undefined
• 支持的模板字符串： 查看 output.assetModuleFilename

与 output.assetModuleFilename 相同。覆盖 output.assetModuleFilename 并且仅适用于 asset 和 asset/resource 模块类型。

module.exports = {
  module: {
    generator: {
      asset: {
        filename: 'static/[hash][ext]',
      },
    },
  },
};

module.generator.asset.publicPath#

• 类型: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• 默认: undefined

覆盖 output.publicPath，仅适用于模块类型为 'asset' 或 'asset/resource' 的模块。

module.exports = {
  module: {
    generator: {
      asset: {
        publicPath: 'https://cdn.example.com/',
      },
    },
  },
};

module.generator.asset.emit#

• 类型: boolean
• 默认值: true

是否将资产输出到磁盘。您可以将此选项设置为 false 以避免为某些场景（例如 SSR）输出不必要的文件。

仅适用于模块类型为 'asset' 或 'asset/resource' 的模块。

• 'asset':

module.exports = {
  module: {
    generator: {
      asset: {
        emit: false,
      },
    },
  },
};

• 'asset/resource':

module.exports = {
  module: {
    generator: {
      'asset/resource': {
        emit: false,
      },
    },
  },
};

module.generator["asset/inline"]#

asset/inline 模块的生成器选项。

module.generator["asset/inline"].dataUrl#

与 module.generator["asset"].dataUrl 相同。

module.generator["asset/inline"].dataUrl.encoding#

与 module.generator["asset"].dataUrl.encoding 相同。

module.generator["asset/inline"].dataUrl.mimetype#

与 module.generator["asset"].dataUrl.mimetype 相同。

module.generator["asset/resource"]#

asset/resource 模块的生成器选项。

module.generator["asset/resource"].filename#

与 module.generator["asset"].filename 相同。

module.generator["asset/resource"].publicPath#

与 module.generator["asset"].publicPath 相同。

module.generator["css/auto"]#

css/auto 模块的生成器选项。

module.generator["css/auto"].exportsConvention#

• 类型: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only'
• 默认值: 'as-is'

自定义 CSS 导出名称如何导出到 JavaScript 模块，例如保持原样、转换为驼峰式命名等。

module.generator["css/auto"].exportsOnly#

• 类型: boolean
• 默认值: 节点环境为 true，网络环境为 false。

如果为 true，则仅导出 CSS 中的标识符映射到输出 JavaScript 文件中，而不在模板中嵌入任何样式表。如果您使用 CSS 模块进行预渲染（例如 SSR），这将很有用。

如果为 false，则生成样式表并将它们嵌入模板中。

module.generator["css/auto"].localIdentName#

• 类型: string
• 默认值: [uniqueName]-[id]-[local]

自定义为 CSS 模块生成的本地类名的格式，除了 文件级别 和 模块级别 的替换之外，还包括 [uniqueName] 和 [local]。

module.generator["css/auto"].esModule#

• 类型: boolean
• 默认值: true

此配置可用于改进 ESM-CJS 的互操作性。

是否将 __esModule 添加到 CSS 的导出；如果添加，它将在 esm-cjs 互操作期间被视为 ES 模块，否则，它将被视为 CommonJS 模块。

例如，一个常见的用例，当使用来自第三方组件库的 CommonJS 输出时，有时需要添加此配置以确保正确的 esm-cjs 互操作，以获得正确的导出（这可以与 Rule.test 和其他匹配条件结合使用，以仅为该特定组件库添加它）。

第三方组件库的原始源代码

import style from './style.css';

export function Button() {
  return <button className={style.btn}></button>;
}

第三方组件库发布的 CommonJS 格式输出

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.Button = Button;
var _style = _interopRequireDefault(require('./style.css'));
var _jsxRuntime = require('react/jsx-runtime');
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
function Button() {
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)('button', {
    className: _style['default'].btn, // <-- Note: After passing through _interopRequireDefault, this need to access default here.
  });
}

module.generator.css#

css 模块的生成器选项。

module.generator.css.exportsOnly#

与 module.generator["css/auto"].exportsOnly 相同。

module.generator.css.esModule#

与 module.generator["css/auto"].esModule 相同。

module.generator["css/module"]#

css/module 模块的生成器选项。

module.generator["css/module"].exportsConvention#

与 module.generator["css/auto"].exportsConvention 相同。

module.generator["css/module"].exportsOnly#

与 module.generator["css/auto"].exportsOnly 相同。

module.generator["css/module"].localIdentName#

与 module.generator["css/auto"].localIdentName 相同。

module.generator["css/module"].esModule#

与 module.generator["css/auto"].esModule 相同。

module.rules#

• 类型: Rule[]
• 默认： []

一个规则数组，用于匹配创建模块时模块的请求。这些规则可以修改模块的创建行为。它们可以将 Loader 等应用于模块。

规则#

• 类型： Rule
• 默认: {}

规则定义了匹配模块的条件和处理这些模块的行为。

规则行为

定义了相应匹配模块的处理行为，例如：

• 将 Loader 列表应用于这些模块 (Rule.use)
• 应用模块的类型 (Rule.type)
• 应用模块的解析配置 (Rule.resolve)

条件#

• 类型： string | RegExp | Condition[] | LogicalConditions

定义模块的匹配条件，常见的匹配项是 resource、resourceQuery、include 和 exclude。

示例：app.js 导入 ./image.png?inline#foo

• resource 是 /path/to/image.png，并将与 Rule.resource 条件进行匹配
• resourceQuery 是 ?inline，并将与 Rule.resourceQuery 条件进行匹配
• resourceFragment 是 #foo，并将与 Rule.resourceFragment 条件进行匹配

条件表示匹配给定输入的形式，它支持以下类型

• String：给定一个输入，当输入字符串满足 startsWith 时，匹配成功。注意：你可以将其视为 input.startsWith(condition)。
• RegExp：给定一个输入，当输入字符串满足正则表达式时，匹配成功。注意：你可以将其视为 condition.test(input)。
• Condition[]：条件列表。至少一个条件必须匹配。
• LogicalConditions：所有条件都必须匹配。
  • { and: Condition[] }：所有条件都必须匹配。
  • { or: Condition[] }：至少一个条件必须匹配。
  • { not: Condition }：所有条件都不匹配。
• (value: string) => boolean：如果它被调用并返回一个真值，则匹配成功。

嵌套规则#

嵌套规则可以在属性 Rule.rules 和 Rule.oneOf 下指定，这些规则仅在父规则条件匹配时才进行评估。每个嵌套规则都可以包含其自己的条件。

评估顺序如下

1. 父规则
2. Rule.rules
3. Rule.oneOf

Rule.exclude#

• 类型： Condition
• 默认: undefined

排除所有与该条件匹配的模块，并将与资源的绝对路径（不含查询和片段）进行匹配。此选项不能与 Rule.resource 同时存在。

Rule.include#

• 类型： Condition
• 默认: undefined

匹配所有与该条件匹配的模块，并将与资源的绝对路径（不含查询和片段）进行匹配。此选项不能与 Rule.resource 同时存在。

Rule.resource#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与资源（不含查询和片段的绝对路径）进行匹配。此选项不能与 Rule.test 同时存在。

Rule.resourceQuery#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与资源的查询进行匹配。注意：包含 ?，当 Rule.resourceQuery 为 ?raw 时，它将匹配 foo?raw 的资源请求

Rule.resourceFragment#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与资源的片段进行匹配。注意：包含 #，当 Rule.resourceFragment 为 #abc 时，它将匹配 foo#abc 的资源请求

Rule.test#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与资源（不含查询和片段的绝对路径）进行匹配。此选项不能与 Rule.resource 同时存在。

Rule.issuer#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与发出当前模块的模块的资源（不含查询和片段的绝对路径）进行匹配。

Rule.issuerLayer#

• 类型: string
• 默认: undefined

匹配所有与该资源匹配的模块，并将与发出当前模块的模块的层级进行匹配。

一个基本示例

module.exports = {
  module: {
    rules: [
      {
        issuerLayer: 'other-layer',
      },
    ],
  },
};

一个更复杂的示例是与 入口选项 的组合，用于同时构建现代和传统捆绑包

module.exports = {
  entry: {
    index: {
      import: './src/index.js',
      layer: 'modern',
    },
    'index-legacy': {
      import: './src/index.js',
      layer: 'legacy',
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        issuerLayer: 'modern',
        options: {
          env: { targets: ['chrome >= 100'] },
        },
      },
      {
        test: /\.js$/,
        issuerLayer: 'legacy',
        options: {
          env: { targets: ['ie >= 11'] },
        },
      },
    ],
  },
  experiments: {
    layers: true,
  },
};

Rule.dependency#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与引入当前模块的依赖项的类别进行匹配，例如 esm 表示 import 和 import()，cjs 表示 require()，url 表示 new URL() 和 url()。

Rule.scheme#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与资源的方案进行匹配。

例如，你可以使用以下配置将内联数据 URI 资源视为单独的资源

module.exports = {
  module: {
    rules: [
      {
        scheme: 'data',
        type: 'asset/resource',
      },
    ],
  },
};

Rule.mimetype#

• 类型： Condition
• 默认: undefined

匹配所有与该资源匹配的模块，并将与资源的 mimetype 进行匹配。

Rule.descriptionData#

• 类型： { [key: string]: Condition }
• 默认: undefined

descriptionData 选项允许你匹配描述文件（通常是 package.json）中属性的值，以确定规则应该应用于哪些模块。这是一种根据模块 package.json 中找到的元数据将规则应用于特定模块的有效方法。

descriptionData 中的对象键对应于模块 package.json 中的键，例如 name、version 等。每个键都应该与一个 Condition 相关联，用于匹配 package.json 数据。

例如，在下面，我们仅将规则应用于包含其 package.json name 中的 'rspack' 字符串的 JavaScript 资源。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /node_modules/,
        descriptionData: {
          name: packageJsonName => packageJsonName.includes('rspack'),
        },
        // additional rule options...
      },
    ],
  },
};

Rule.with#

• 类型： { [key: string]: Condition }
• 默认: undefined

with 可以与 导入属性 结合使用。

例如，以下配置将匹配 { type: "url" } 并将匹配模块的 type 更改为 "asset/resource"

module.exports = {
  module: {
    rules: [
      {
        with: { type: 'url' },
        type: 'asset/resource',
      },
    ],
  },
};

以下导入将匹配

import url from './data' with { type: 'url' };
import('./data', { with: { type: 'url' } });

需要注意的是，为了让 Rspack 正确匹配 with 语法，当你使用 builtin:swc-loader 时，你需要手动启用 keepImportAttributes 配置以保留导入属性

module.exports = {
  module: {
    rules: [
      {
        with: { type: 'url' },
        type: 'asset/resource',
      },
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            experimental: {
+             keepImportAttributes: true,
            },
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

Rule.loaders#

Rule.loader#

Rule.loader 是 Rule.use: [ { loader } ] 的快捷方式。有关详细信息，请参阅 Rule.use。

Rule.options#

Rule.options 是 Rule.use: [ { options } ] 的快捷方式。有关详细信息，请参阅 Rule.use。

Rule.parser#

• 类型: Object
• 默认: {}

与规则条件匹配的特定模块的解析器选项，这将覆盖 module.parser 中的解析器选项。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        parser: {
          namedExports: false,
        },
        type: 'css/module',
      },
    ],
  },
};

有关特定解析器选项及其对应的模块类型，请参阅 module.parser。

Rule.generator#

• 类型: Object
• 默认: {}

与规则条件匹配的特定模块的生成器选项，这将覆盖 module.generator 中的解析器选项。

module.exports = {
  module: {
    rules: [
      {
        test: /\.png/,
        generator: {
          filename: '[contenthash][ext]',
        },
        type: 'asset',
      },
    ],
  },
};

有关特定生成器选项及其对应的模块类型，请参阅 module.generator。

Rule.sideEffects#

• 类型: boolean

标记模块是否有副作用

Rule.enforce#

• 类型： 'pre' | 'post'

指定 Loader 的类别。

当指定为 'pre' 时，Loader 将在所有其他 Loader 之前执行。

当指定为 'post' 时，Loader 将在所有其他 Loader 之后执行。

Rule.type#

• 类型： 'javascript/auto' | 'typescript' | 'css' | 'css/module' | 'css/auto' | 'json' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'

用于标记匹配模块的类型，这会影响 Rspack 的内置处理如何处理模块。例如，当模块被标记为 'typescript' 时，模块将使用 TS 解析器/生成器进行处理。

• 'javascript/auto'：JavaScript 模块，支持的模块系统：CommonJS、ESM，目前没有计划支持 AMD 模块。
• 'javascript/esm'：JavaScript 模块，被视为 ES 模块。
• 'javascript/dynamic'：JavaScript 模块，被视为 Script。
• 'css'：CSS 模块
• 'css/module'：CSS Modules 模块
• 'css/auto'：如果文件名匹配 /\.module(s)?\.[^.]+$/，则为 CSS Modules 模块，否则为 CSS 模块
• 'json'：JSON 数据模块
• 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'：请参阅 资产模块

Rule.layer#

• 类型: string

用于标记匹配模块的层级。一组模块可以合并到一个层级中，然后可以在拆分块、统计信息或 入口选项 中使用。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        layer: 'layer-name',
      },
    ],
  },
};

Rule.use#

• 类型

export type RuleSetUse =
  | RuleSetUseItem[]
  | RuleSetUseItem
  | ((ctx: RawFuncUseCtx) => RuleSetUseItem[]);
export type RuleSetUseItem =
  | { loader: string; options: Record<string, any> }
  | string;
export interface RawFuncUseCtx {
  resource?: string;
  realResource?: string;
  resourceQuery?: string;
  issuer?: string;
}

一个用于传递 Loader 包名称及其选项的数组。string[] 例如：use: ['svgr-loader'] 是 use: [ { loader: 'svgr-loader' } ] 的简写形式。Loader 将按从右到左的顺序执行。

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        use: [
          'svgr-loader',
          {
            loader: 'svgo-loader',
            options: {
              configFile: false,
            },
          },
        ],
      },
    ],
  },
};

函数也可以被使用

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        use: info => ({
          loader: 'svgo-loader',
          options: {
            plugins: [
              {
                cleanupIDs: { prefix: basename(info.resource) },
              },
            ],
          },
        }),
      },
    ],
  },
};

Rule.resolve#

根据匹配的模块设置特定的模块解析选项

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        resolve: {
          preferRelative: true,
        },
      },
    ],
  },
};

Rule.rules#

• 类型: Rule[]
• 默认: undefined

一种 嵌套规则，一个规则数组，在父规则匹配时也会被使用。

Rule.oneOf#

• 类型: Rule[]
• 默认: undefined

一种 嵌套规则，一个规则数组，在父规则匹配时只使用第一个匹配的规则。