模块变量

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

module.loaded (NodeJS)

如果模块当前正在执行，则为 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 (NodeJS)

请参阅 node.js global。

出于兼容性原因，webpack 默认情况下会填充 global 变量。

__dirname (NodeJS)

取决于配置选项 node.__dirname

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

如果在由解析器解析的表达式中使用，则配置选项将被视为 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 (NodeJS)

取决于配置选项 node.__filename

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

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

__resourceQuery (webpack 特定)

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

require('file.js?test');

file.js

__resourceQuery === '?test';

__webpack_public_path__ (webpack 特定)

等于配置选项的 output.publicPath。

__webpack_require__ (webpack 特定)

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

__webpack_chunk_load__ (webpack 特定)

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

• chunkId 要加载的 chunk 的 id。

从备用公共路径加载 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 特定)

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

__webpack_module__.id (webpack 特定)

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

__webpack_modules__ (webpack 特定)

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

__webpack_hash__ (webpack 特定)

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

__webpack_get_script_filename__ (webpack 特定)

function (chunkId)

它提供根据其 ID 的块的文件名。

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

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 检查导出是否可以被混淆

__webpack_is_included__ (webpack 特定)

测试给定模块是否被 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。