模块变量

本节涵盖了在 webpack 编译的代码中可用的所有**变量**。模块将通过 `module` 和其他变量访问编译过程中的特定数据。

module.loaded (Node.js)

如果模块当前正在执行，则为 `false`，如果同步执行已完成，则为 `true`。

module.hot (webpack 特有)

指示是否启用了模块热替换并提供了处理接口。详情请参阅HMR API 页面。

module.id (CommonJS)

当前模块的 ID。

module.id === require.resolve('./file.js');

module.exports (CommonJS)

定义了当消费者对模块进行 `require` 调用时将返回的值（默认为一个新对象）。

module.exports = function doSomething() {
  // Do something...
};

exports (CommonJS)

此变量等于 `module.exports` 的默认值（即一个对象）。如果 `module.exports` 被覆盖，`exports` 将不再被导出。

exports.someValue = 42;
exports.anObject = {
  x: 123,
};
exports.aFunction = function doSomething() {
  // Do something
};

global (Node.js)

参见 node.js global。

出于兼容性原因，webpack 默认对 `global` 变量进行 Polyfill。

__dirname (Node.js)

取决于配置选项 `node.__dirname`

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

如果在被解析器（Parser）解析的表达式中使用，则该配置选项被视为 `true`。

import.meta

`import.meta` 向 JavaScript 模块暴露上下文相关的元数据，例如模块的 URL。它仅在ESM 中可用。

请注意，webpack 不支持直接访问 `import.meta`。相反，你应该访问它的属性或使用解构赋值。例如，

// webpack will warn about this
Object.keys(import.meta);

// fine to use
console.log(import.meta.url);
const { url } = import.meta;

import.meta.url

返回模块的绝对 `file:` URL。

src/index.js

console.log(import.meta.url); // output something like `file:///path/to/your/project/src/index.js`

import.meta.webpack

返回 webpack 版本。

src/index.js

console.log(import.meta.webpack); // output `5` for webpack 5

import.meta.webpackHot

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

import.meta.webpackContext

返回与 `require.context` 相同的值，但仅适用于 `javascript/auto` 和 `javascript/esm`。

• 类型

  (
    request: string,
    options?: {
      recursive?: boolean;
      regExp?: RegExp;
      include?: RegExp;
      exclude?: RegExp;
      preload?: boolean | number;
      prefetch?: boolean | number;
      chunkName?: string;
      exports?: string | string[][];
      mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once';
    }
  ) => webpack.Context;

• 可用版本：5.70.0+

• 示例

  const contextRequire = import.meta.webpackContext('.', {
    recursive: false,
    regExp: /two/,
    mode: 'weak',
    exclude: /three/,
  });

__filename (Node.js)

取决于配置选项 `node.__filename`

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

如果在被解析器（Parser）解析的表达式中使用，则该配置选项被视为 `true`。

__resourceQuery (webpack 特有)

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

require('file.js?test');

file.js

__resourceQuery === '?test';

__webpack_public_path__ (webpack 特有)

等于配置选项的 `output.publicPath`。

__webpack_require__ (webpack 特有)

原始的 require 函数。此表达式不会被解析器（Parser）解析以获取依赖项。

__webpack_chunk_load__ (webpack 特有)

内部的 Chunk 加载函数。接受一个参数：

• chunkId 要加载的 Chunk 的 ID。

当一个 Chunk 加载失败时，从备用 public path 加载 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_module__ (webpack 特有)

5.68.0+

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

__webpack_module__.id (webpack 特有)

5.68.0+

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

__webpack_modules__ (webpack 特有)

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

__webpack_hash__ (webpack 特有)

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

__webpack_get_script_filename__ (webpack 特有)

function (chunkId)

它通过 Chunk 的 ID 提供文件名。

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

const oldFn = __webpack_get_script_filename__;

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

__non_webpack_require__ (webpack 特有)

生成一个不被 webpack 解析的 `require` 函数。如果全局 `require` 函数可用，这可用于实现一些很酷的功能。

__webpack_exports_info__ (webpack 特有)

在模块中，`__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>.<exportName>.<exportName>.used`

• 使用 `__webpack_exports_info__.<name>.canMangle` 检查导出是否可以被混淆（mangled）

__webpack_is_included__ (webpack 特有)

5.16.0+

测试给定模块是否由 webpack 打包。

if (__webpack_is_included__('./module-a.js')) {
  // do something
}

__webpack_base_uri__ (webpack 特有)

在运行时更改基本 URI。

• 类型：`string`

• 可用版本：5.21.0+

• 示例

  __webpack_base_uri__ = 'https://example.com';

__webpack_runtime_id__

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

这是 webpack 的一个特定功能，自 webpack 5.25.0 起可用。

src/index.js

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

DEBUG (webpack 特有)

等于配置选项 `debug`。