モジュール変数

このセクションでは、Webpackでコンパイルされたコードで使用可能なすべての**変数**について説明します。モジュールは、moduleおよびその他の変数を通じて、コンパイルプロセスからの特定のデータにアクセスできます。

module.loaded (NodeJS)

モジュールが現在実行中であればfalse、同期実行が完了していればtrueになります。

module.hot (Webpack固有)

ホットモジュール置換 (Hot Module Replacement)が有効かどうかを示し、プロセスへのインターフェースを提供します。詳細は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は、モジュールのURLなどのコンテキスト固有のメタデータをJavaScriptモジュールに公開します。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

javascript/autoとjavascript/esmに対してのみ、require.contextと同じ値を返します。

• 型

  (
    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固有)

内部チャンク読み込み関数。1つの引数をとります。

• chunkId 読み込むチャンクのID。

1つが失敗したときに代替パブリックパスからチャンクを読み込む例

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へのアクセスを提供します。moduleは厳格なESMでは使用できません。

__webpack_module__.id (Webpack固有)

現在のmoduleのID (module.id)へのアクセスを提供します。moduleは厳格なESMでは使用できません。

__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と等しくなります。