模块变量#

CommonJs#

module.loaded#

false 表示模块正在执行，true 表示同步执行已完成。

module.id#

当前模块 ID。

module.id === require.resolve('./src/main.js'); // true

module.hot#

指示是否启用了热模块替换，并提供一个用于处理此过程的接口。有关详细信息，请参阅 HMR API 页面。

global#

有关详细信息，请参阅 node.js global。

Rspack 将用代理对象替换 global，并在其中处理兼容性问题。

global['property']

__webpack_require__.g['property'];

// webpack/runtime/global
__webpack_require__.g = (function () {
  // compatibility code
})();

__filename#

取决于配置 node.__filename。

• false: undefined
• mock: 等于 '/index.js'
• true: NodeJs __filename

如果在由解析器解析的表达式中使用，则配置选项将被视为 true。

__filename

'src/main.js';

__dirname#

取决于配置 node.__dirname。

• false: undefined
• mock: 等于 '/index.js'
• true: NodeJs __dirname

如果在由解析器解析的表达式中使用，则配置选项将被视为 true。

__dirname

'src';

import.meta (ESM)#

import.meta 向 JavaScript 模块公开上下文特定的元数据，例如模块的 URL。它仅在 ESM 中可用。

请注意，Rspack 不支持直接访问 import.meta。相反，您应该访问其属性或使用解构赋值。例如：

import.meta
typeof import.meta

{
} // Warning: Direct access to import.meta is not supported (only property access or destructuring is supported)
('object');

import.meta.url#

返回模块的绝对 file: URL。

import.meta.url
typeof import.meta.url

'file://project_root/src/main.js';
'string';

import.meta.webpackContext#

import.meta.webpackContext 是 webpack 特有的函数，允许您动态导入一组模块。

您可以在代码中使用 import.meta.webpackContext，Rspack 将在构建过程中解析和引用匹配的模块。

• 类型

function webpackContext(
  /**
   * A directory to search.
   */
  request: string,
  options?: {
    /**
     * Whether subdirectories should be searched.
     * @default true
     */
    recursive?: boolean;
    /**
     * A regular expression to match files.
     * @default /^\.\/.*$/ (any file)
     */
    regExp?: RegExp;
    /**
     * Module loading mode.
     * @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;

• 示例

// Create a context, with files from the test directory that
// can be required with a request ending with `.test.js`.
const context = import.meta.webpackContext('./test', {
  recursive: false,
  regExp: /\.test\.js$/,
});

// Create a context with all files in the parent folder and
// descending folders ending with `.stories.js`.
const context = import.meta.webpackContext('../', {
  recursive: true,
  regExp: /\.stories\.js$/,
});

// If mode is set to 'lazy', the underlying modules will be loaded asynchronously
const context = import.meta.webpackContext('./locales', {
  recursive: true,
  regExp: /\.json$/,
  mode: 'lazy',
});

上下文 API#

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

此函数具有三个属性：resolve、keys 和 id。

• resolve 是一个函数，它返回解析的请求的模块 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);

  // Here you can use your module, for example console.log
  console.log(componentModule);
});

import.meta.webpackContext() 简化了模块导入的过程，尤其是在您有很多文件需要管理时。使用它时，请避免匹配不必要的文件，因为这可能会导致构建时间和输出大小大幅增加。

import.meta.webpackHot#

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

运行时#

__webpack_hash__#

它提供对编译哈希的访问。

__webpack_hash__

__webpack_require__.h();

// webpack/runtime/get_full_hash
__webpack_require__.h = function () {
  return '9210c6f859a51c6f9a62';
};

__webpack_runtime_id__#

访问当前入口的运行时 ID。

__webpack_runtime_id__

__webpack_require__.j;

// webpack/runtime/runtime_id
__webpack_require__.j = '909';

__webpack_public_path__#

等于配置选项的 output.publicPath。

__webpack_public_path__

__webpack_require__.p;

// output.publicPath !== "auto"
__webpack_require__.p = 'output.publicPath';
// output.publicPath === "auto"，
__webpack_require__.p = 'calculated from document/location';

__webpack_base_uri__#

在运行时获取或更改基本 URI。

__webpack_base_uri__

__webpack_require__.b;

// chunk loading
__webpack_require__.b = document.baseURI || self.location.href;

__webpack_nonce__#

Rspack 能够为其加载的所有脚本添加一个 nonce。要激活此功能，请设置一个 __webpack_nonce__ 变量，并将其包含在您的入口脚本中。

__webpack_nonce__ = 'your_nonce_code';

__webpack_require__.nc = '2312312';

// webpack/runtime/load_script
if (__webpack_require__.nc) {
  script.setAttribute('nonce', __webpack_require__.nc);
}

模块#

__webpack_modules__#

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

__webpack_modules__

var __webpack_modules__ = {
  'main.js': function () {
    __webpack_require__.m;
  },
};
__webpack_require__.m = __webpack_modules__;

__webpack_module__#

它提供对当前 module 的访问。module 在严格的 ESM 中不可用。

__webpack_module__

"main.js": function(renamed_module) {
  renamed_module
}

__webpack_module__.id#

它提供对当前模块 ID（module.id）的访问。module 在严格的 ESM 中不可用。

__webpack_module__.id

"main.js": function(renamed_module) {
  renamed_module.id
}

__webpack_require__#

原始 require 函数。此表达式不会被解析器解析为依赖项。

__webpack_require__('./dep.js')

"main.js": function(_, __, renamed_require) {
  renamed_require('./dep.js')
}

__non_webpack_require__#

生成一个不被 webpack 解析的 require 函数。如果可用，它可用于使用全局 require 函数做一些很酷的事情。

__non_webpack_require__('outer.js')

"main.js": function(_, __, __webpack_require__) {
  require('outer.js')
}

__webpack_is_included__#

测试给定模块是否由 webpack 捆绑。

if (__webpack_is_included__('./dep.js')) {
  // do something
}

if (true) {
  // do something
}

__resourceQuery#

当前模块的资源查询。如果执行了以下 require 调用，则查询字符串将在 file.js 中可用。

require('file.js?test');

__resourceQuery

'?test';

__webpack_exports_info__#

在模块中，__webpack_exports_info__ 可用于允许导出自省

• __webpack_exports_info__ 始终为 true
• 当导出已知未使用时，__webpack_exports_info__.<exportName>.used 为 false，否则为 true
• __webpack_exports_info__.<exportName>.useInfo 表示
  • false 当导出已知未使用时
  • true 当导出已知使用时
  • null 当导出使用情况可能取决于运行时条件时
  • undefined 当没有可用信息时
• __webpack_exports_info__.<exportName>.provideInfo 表示
  • false 当导出已知未提供时
  • true 当导出已知提供时
  • null 当导出提供情况可能取决于运行时条件时
  • undefined 当没有可用信息时
• 可以从嵌套导出访问信息：例如 __webpack_exports_info__.<exportName>.<exportProperty1>.<exportProperty2>.used
• 使用 __webpack_exports_info__.<exportName>.canMangle 检查导出是否可以混淆

if (__webpack_exports_info__.someUsedExport.used) { }
if (__webpack_exports_info__.someUnusedExport.used) { }

if (true) {
}
if (false) {
}

Chunks#

__webpack_chunkname__#

获取当前 chunk 名称。

__webpack_chunkname__

__webpack_require__.cn;

// webpack/runtime/chunk_name
__webpack_require__.cn = 'main';

__webpack_chunk_load__#

内部 chunk 加载函数。接收一个参数

• chunkId：要加载的 chunk 的 id。

__webpack_chunk_load__

__webpack_require__.e;

// webpack/runtime/ensure_chunk
__webpack_require__.e = function (chunkId) {
  // return chunk loading promise
};

例如，当一个公共路径失败时，从备用公共路径加载 chunk

const originalLoad = __webpack_chunk_load__;
const publicPaths = ['a', 'b', 'c'];
__webpack_chunk_load__ = async id => {
  let error;
  for (const path of publicPaths) {
    __webpack_public_path__ = path;
    try {
      return await originalLoad(id);
    } catch (e) {
      error = e;
    }
  }
  throw error;
};
import('./module-a').then(moduleA => {
  // now webpack will use the custom __webpack_chunk_load__ to load chunk
});

__webpack_get_script_filename__#

它根据其 id 提供 chunk 的文件名。

__webpack_get_script_filename__

__webpack_require__.u;

// webpack/runtime/get_chunk_filename
__webpack_require__.u = function (chunkId) {
  // ...
};

它是可分配的，这允许更改运行时使用的文件名。例如，它可用于在加载 chunk 时确定最终路径。

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = chunkId => {
  const filename = oldFn(chunkId);
  return filename + '.changed';
};

模块联邦#

__webpack_share_scopes__#

此对象用作远程容器中的共享作用域，并填充来自主机提供的模块

__webpack_init_sharing__#

此方法用于在主机容器中初始化共享作用域的模块。

System.js#

__system_context__#

当 output.libraryTarget="system" 时来自 System.js 的上下文

Rspack#

__rspack_version__#

当前的 Rspack 版本，默认为 @rspack/core/package.json 中的版本，可以通过 experiments.rspackFuture.bundlerInfo.version 修改。

__rspack_version__

__webpack_require__.rv;

// webpack/runtime/rspack_version
__webpack_require__.rv = '0.7.4';

__rspack_unique_id__#

当前捆绑器的 ID，值为 bundler={bundler}@{version}： - bundler：默认为 "rspack"，可以通过 experiments.rspackFuture.bundlerInfo.bundler 修改。

• version：默认为 @rspack/core/package.json 中的版本，可以通过 experiments.rspackFuture.bundlerInfo.version 修改。

__rspack_unique_id__

__webpack_require__.ruid;

// webpack/runtime/rspack_unique_id
__webpack_require__.ruid = '[email protected]';