模块变量#

本节涵盖了使用 Rspack 编译代码时所有可用的变量。模块将能够通过 module 和其他变量访问来自编译过程的特定数据。

module.hot（webpack 专用）#

是否启用了热模块替换，并提供了一些方法来处理该过程。有关详细信息，请参阅 HMR API 页面。

import.meta.webpackContext#

import.meta.webpackContext 是 webpack 特有的一个函数，它允许你动态地 import 一组模块。

你可以在代码中使用 import.meta.webpackContext，Rspack 将在构建时进行解析并引用匹配的模块。

• 类型：

function webpackContext(
  /**
   * 要搜索的目录
   */
  request: string,
  options?: {
    /**
     * 是否还搜索其子目录
     * @default true
     */
    recursive?: boolean;
    /**
     * 匹配文件的正则表达式
     * @default /^\.\/.*$/（匹配任意文件）
     */
    regExp?: RegExp;
    /**
     * 模块加载模式
     * @default 'sync'
     */
    mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
    include?: RegExp;
    exclude?: RegExp;
    preload?: boolean | number;
    prefetch?: boolean | number;
    chunkName?: string;
    exports?: string | string[][];
  },
): Context;

• 示例：

// 创建一个上下文，
// 文件直接来自 test 目录，匹配的文件名以 `.test.js` 结尾。
const context = import.meta.webpackContext('./test', {
  recursive: false,
  regExp: /\.test\.js$/,
});

// 创建一个上下文，
// 文件来自父文件夹及其所有子级文件夹，匹配的文件名以 `.stories.js` 结尾。
const context = import.meta.webpackContext('../', {
  recursive: true,
  regExp: /\.stories\.js$/,
});

// 如果 `mode` 被设置为 `lazy`，模块将会被异步加载
const context = import.meta.webpackContext('./locales', {
  recursive: true,
  regExp: /\.json$/,
  mode: 'lazy',
});

传递给 import.meta.webpackContext() 的第一个参数必须是字面量。

context API#

import.meta.webpackContext() 返回的 context 是一个函数，它接收一个 request 参数（模块路径）。

这个函数有三个属性：resolve，keys 与 id。

• resolve 是一个函数，它返回 request 被解析后得到的模块 id。
• keys 也是一个函数，它返回一个数组，由所有可能被此上下文模块处理的请求组成。
• id 是上下文模块的模块 id. 它可能在使用 module.hot.accept 时会用到。

如果你想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助。

考虑一种情况，你有一个这样的文件夹结构：

你可以使用 import.meta.webpackContext() 动态导入文件夹中的所有组件：

const componentsContext = import.meta.webpackContext('./components', {
  recursive: false,
  regExp: /\.js$/,
});

componentsContext.keys().forEach(fileName => {
  const componentModule = componentsContext(fileName);

  // 在这里你可以使用你的模块，例如使用 console.log 输出
  console.log(componentModule);
});

import.meta.webpackContext() 简化了模块导入过程，尤其是当你有大量模块需要管理时。在使用时，请避免匹配到不需要的文件，否则可能导致构建时间和产物体积明显增加。

import.meta.webpackHot（webpack 专用）#

module.hot 的别名，import.meta.webpackHot 可以在严格的 ESM 中使用，而 module.hot 不能。

__dirname（NodeJS）#

依赖于配置项 node.__dirname。

• false：未定义
• mock：等于 '/'
• true：node.js __dirname

如果在一个被 Parser 解析的表达式内部使用，则配置选项会被当作 true 处理。

__resourceQuery（webpack 专用）#

当前模块的资源查询（resource query）。如果进行了如下的 require 调用，那么查询字符串（query string）在 file.js 中可用。

require('file.js?test');

__resourceQuery === '?test';

__webpack_modules__ (webpack 专用)#

访问所有模块的内部对象。

__webpack_hash__ (webpack 专用)#

提供对编译过程中（compilation）的 hash 信息的访问。

__webpack_public_path__ (webpack 专用)#

等于配置选项的 output.publicPath。

__webpack_chunkname__ (webpack-specific)#

访问当前 chunk 的名称。

__webpack_runtime_id__ (webpack-specific)#

访问当前入口的 runtime id。

console.log(__webpack_runtime_id__ === 'main');