本章节涵盖了使用 webpack 编译的代码中所有的变量。模块将通过 module
和其他变量,来访问编译过程中的某些数据。
false
表示该模块正在执行, true
表示同步执行已经完成。
表示 模块热替换(Hot Module Replacement) 是否启用,并给进程提供一个接口。详细说明请查看 模块热替换 API 页面。
当前模块的 ID。
module.id === require.resolve('./file.js');
调用者通过 require
对模块进行调用时返回的值(默认为一个新对象)。
module.exports = function doSomething() {
// Do something...
};
该变量默认值为 module.exports
(即一个对象)。 如果 module.exports
被重写的话, exports
不再会被导出。
exports.someValue = 42;
exports.anObject = {
x: 123,
};
exports.aFunction = function doSomething() {
// Do something
};
出于兼容性考虑,webpack 默认填充了 global
变量。
取决于 node.__dirname
配置选项:
false
: 未定义mock
: 等同于 '/'
true
: node.js __dirname如果在一个被 Parser 解析的表达式内部使用,则配置选项会被当作 true
处理。
返回模块以 file:
开头绝对路径的 URL。
src/index.js
console.log(import.meta.url); // 输出结果类似于 `file:///path/to/your/project/src/index.js`
返回 webpack 的版本
src/index.js
console.log(import.meta.webpack); // output `5` for webpack 5
webpack 特定。module.hot
的一个别名,strict ESM 中可以使用 import.meta.webpackHot
但是不能使用 module.hot
。
返回与 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/,
});
取决于 node.__filename
配置选项:
false
: 未定义mock
: 等同于 '/index.js'
true
: node.js __filename如果在一个被 Parser 解析的表达式内部使用,则配置选项会被当作 true
处理。
当前模块的资源查询(resource query) 。如果进行了如下的 reqiure
调用,那么查询字符串(query string)在file.js
中可访问。
require('file.js?test');
file.js
__resourceQuery === '?test';
等同于 output.publicPath
配置选项。
原始 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
});
它提供对当前 module
的访问。module
在 ESM 严格模式下不可用。
它提供对当前 module
(module.id
) ID 的访问。module
在 ESM 严格模式下不可用。
访问所有模块的内部对象。
这个变量提供对编译过程中(compilation)的 hash 信息的访问。
function (chunkId)
它通过 chunk 的 id 提供 chunk 的文件名。
它是可分配的,允许更改运行时使用的文件名。例如,它可以用来确定加载 chunk 时的最终路径。
const oldFn = __webpack_get_script_filename__;
__webpack_get_script_filename__ = (chunkId) => {
const filename = oldFn(chunkId);
return filename + '.changed';
};
生成一个不会被 webpack 解析的 require
函数。配合全局可以获取到的 require 函数,可以完成一些酷炫操作。
在模块中, __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
当没有可用信息时可以从嵌套的 exports 中得到相关信息: 例如 __webpack_exports_info__.<exportName>.<exportName>.<exportName>.used
Check whether exports can be mangled with __webpack_exports_info__.<name>.canMangle
测试给定的模块是否被 webpack 打包。
if (__webpack_is_included__('./module-a.js')) {
// do something
}
运行时修改 base 的 URI。
类型:string
可用:5.21.0+
示例:
__webpack_base_uri__ = 'https://example.com';
访问当前入口的 runtime id。
这是一个 webpack 特性,并且在 webpack 5.25.0 后可用。
src/index.js
console.log(__webpack_runtime_id__ === 'main');
等同于 debug
配置选项。
Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档。