模块变量

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

module.loaded (NodeJS)

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

module.hot (webpack-specific)

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

module.id (CommonJS)

当前模块的 ID。

console.log(import.meta.url);

export default

定义当消费方对该模块进行 import 调用时将返回的值（默认为新对象）。

export default function doSomething() {
  // 做一些事情...
}

警告： 不能在异步函数中使用。

exports (CommonJS)

命名导出允许你从一个模块中导出多个变量、函数或对象。与默认导出不同，导入这些值时必须使用确切的名称。

export const someValue = 42;
export const anObject = {
  x: 123,
};
export function doSomething() {
  // 做一些事情
}

global (NodeJS)

参见 node.js global。

出于兼容性原因，webpack 默认会 polyfill global 变量。

__dirname (NodeJS)

根据配置选项 node.__dirname：

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

如果在 Parser 解析的表达式内使用，则配置选项被视为 true。

import.meta

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

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

// webpack 将对此发出警告
Object.keys(import.meta);

// 可以安全使用
console.log(import.meta.url);
const { url } = import.meta;

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); // 对于 webpack 5，输出 `5`

import.meta.webpackHot

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

import.meta.webpackContext

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

• 类型：

  ts 复制代码

  (
    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+

• 示例：

  js 复制代码

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

import.meta.main

console.log(import.meta.main); // true

console.log(import.meta.main); // false

import webpack from "webpack";

export default {
  mode: "production", // NODE_ENV 自动设置为 "production"
  dotenv: {
    prefix: "WEBPACK_", // 仅暴露带有 WEBPACK_ 前缀的变量
  },
  plugins: [
    // EnvironmentPlugin 暴露 process.env 中的变量
    new webpack.EnvironmentPlugin({
      API_URL: "https://api.example.com",
    }),
    // DefinePlugin 允许自定义定义
    new webpack.DefinePlugin({
      "import.meta.env.CUSTOM_VAR": JSON.stringify("custom_value"),
    }),
  ],
};

// 访问环境变量
console.log(import.meta.env.NODE_ENV); // "production"（来自 mode）
console.log(import.meta.env.API_URL); // 来自 EnvironmentPlugin 或 process.env 的值
console.log(import.meta.env.CUSTOM_VAR); // "custom_value"（来自 DefinePlugin）

// 类型检查
console.log(typeof import.meta.env); // "object"

// 真值检查
if (import.meta.env) {
  // import.meta.env 为真
}

// 访问不存在的属性返回 undefined
if (!import.meta.env.NOT_EXIST) {
  // NOT_EXIST 为 undefined/falsy
}

// 解构赋值
const { NODE_ENV, API_URL } = import.meta.env;

const assetUrl = import.meta.resolve("./logo.png");

const modules = import.meta.glob("./pages/*.js");
// {
//   "./pages/about.js": () => import("./pages/about.js"),
//   "./pages/home.js": () => import("./pages/home.js"),
// }

for (const path in modules) {
  modules[path]().then((mod) => console.log(path, mod));
}

const icons = import.meta.glob("./icons/*.svg", {
  eager: true,
  import: "default",
  query: "?url",
});

import "file.js?test";

__resourceQuery === "?test";

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 (err) {
      error = err;
    }
  }
  throw error;
};
import("./module-a").then((moduleA) => {
  // 现在 webpack 将使用自定义的 __webpack_chunk_load__ 来加载 chunk
});

const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = (chunkId) => {
  const filename = oldFn(chunkId);
  return `${filename}.changed`;
};

__webpack_global__.myProperty = "value";

if (__webpack_is_included__("./module-a.js")) {
  // 做一些事情
}

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