Webpack：模块变量

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

module.loaded (NodeJS)

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

module.hot (webpack-specific)

表示 模块热替换(Hot Module Replacement) 是否启用，并给进程提供一个接口。详细说明请查看 模块热替换 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

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

import.meta.url

返回模块以 file: 开头绝对路径的 URL。

src/index.js

console.log(import.meta.url); // 输出结果类似于 `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​ 的一个别名，strict ESM 中可以使用 ​import.meta.webpackHot​ 但是不能使用 ​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​

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

__resourceQuery (webpack-specific)

当前模块的资源查询(resource query) 。如果进行了如下的 reqiure 调用，那么查询字符串(query string)在​file.js​ 中可访问。

require('file.js?test');

file.js

__resourceQuery === '?test';

__webpack_public_path__ (webpack-specific)

等同于 ​output.publicPath​ 配置选项。

__webpack_require__ (webpack-specific)

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

__webpack_chunk_load__ (webpack-specific)

内部 chunk 载入函数，有一个输入参数：

• chunkId 需要载入的 chunk id。

当一个 chunk 加载失败时，从备用公共路径加载 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-specific)

5.68.0+

它提供对当前 ​module​ 的访问。​module​ 在 ESM 严格模式下不可用。

__webpack_module__.id (webpack-specific)

5.68.0+

它提供对当前 ​module(module.id)​ ID 的访问。​module​ 在 ESM 严格模式下不可用。

__webpack_modules__ (webpack-specific)

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

__webpack_hash__ (webpack-specific)

这个变量提供对编译过程中(compilation)的 hash 信息的访问。

__webpack_get_script_filename__ (webpack-specific)

​function (chunkId)​

它通过 chunk 的 id 提供 chunk 的文件名。

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

const oldFn = __webpack_get_script_filename__;

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

__non_webpack_require__ (webpack-specific)

生成一个不会被 webpack 解析的 require 函数。配合全局可以获取到的 require 函数，可以完成一些酷炫操作。

__webpack_exports_info__ (webpack-specific)

在模块中, ​__webpack_exports_info__​ 可以被获取到，以便导出模块用以自我检查：

1. ​__webpack_exports_info__​ 总是 true
2. 当导出模块未被使用时 ​​__webpack_exports_info__​.​<exportName>.used​​ 为 false, 否则是 true
3. ​​__webpack_exports_info__​.​<exportName>.useInfo​​ 是 

• false 当导出模块未被使用
• true 当导出模块被使用 
• null 当导出模块的使用情况取决于运行时的条件 
• undefined 当没有可用信息时

​    4. ​__webpack_exports_info__​.​<exportName>.provideInfo​是

• false 当导出模块没有被提供
• true 当导出模块被提供
• null 当导出模块的提供情况取决于运行时的条件
• undefined 当没有可用信息时

    5. 可以从嵌套的 exports 中得到相关信息: 例如​__webpack_exports_info__.<exportName>.<exportName>.<exportName>.used​​​​

    6. Check whether exports can be mangled with ​__webpack_exports_info__.<name>.canMangle​

__webpack_is_included__ (webpack-specific)

5.16.0+

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

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

__webpack_base_uri__ (webpack-specific)

运行时修改 base 的 URI。

• 类型：string
• 可用：5.21.0+
• 示例:

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

__webpack_runtime_id__

访问当前入口的 runtime id。

这是一个 webpack 特性，并且在 webpack 5.25.0 后可用。

src/index.js

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

DEBUG (webpack-specific)

等同于 debug 配置选项。

Further Reading

• CommonJS
• Asynchronous Module Definition