出力

トップレベルの output キーには、webpack がバンドル、アセット、および webpack でバンドルまたはロードするその他のものをどのように、どこに出力するかを指示する一連のオプションが含まれています。

output.assetModuleFilename

string = '[hash][ext][query]' function (pathData, assetInfo) => string

output.filename と同じですが、アセットモジュール用です。

[name]、[file]、[query]、[fragment]、[base]、および [path] は、データ URI の置換からビルドされたアセットに対して空文字列に設定されます。

output.asyncChunks

boolean = true

オンデマンドでロードされる非同期チャンクを作成します。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    asyncChunks: true,
  },
};

output.auxiliaryComment

string object

output.library および output.libraryTarget と組み合わせて使用すると、このオプションにより、ユーザーはエクスポートラッパー内にコメントを挿入できます。各 libraryTarget タイプに同じコメントを挿入するには、auxiliaryComment を文字列に設定します。

webpack.config.js

module.exports = {
  //...
  output: {
    library: 'someLibName',
    libraryTarget: 'umd',
    filename: 'someLibName.js',
    auxiliaryComment: 'Test Comment',
  },
};

これにより、以下が得られます。

someLibName.js

(function webpackUniversalModuleDefinition(root, factory) {
  // Test Comment
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require('lodash'));
  // Test Comment
  else if (typeof define === 'function' && define.amd)
    define(['lodash'], factory);
  // Test Comment
  else if (typeof exports === 'object')
    exports['someLibName'] = factory(require('lodash'));
  // Test Comment
  else root['someLibName'] = factory(root['_']);
})(this, function (__WEBPACK_EXTERNAL_MODULE_1__) {
  // ...
});

各 libraryTarget コメントをきめ細かく制御するには、オブジェクトを渡します。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    auxiliaryComment: {
      root: 'Root Comment',
      commonjs: 'CommonJS Comment',
      commonjs2: 'CommonJS2 Comment',
      amd: 'AMD Comment',
    },
  },
};

output.charset

boolean = true

HTML <script> タグに charset="utf-8" を追加するように webpack に指示します。

output.chunkFilename

string = '[id].js' function (pathData, assetInfo) => string

このオプションは、初期チャンクファイル以外のファイルの名前を決定します。指定できる値の詳細については、output.filename オプションを参照してください。

これらのファイル名は、チャンクのリクエストを送信するためにランタイム時に生成される必要があることに注意してください。このため、[name] や [chunkhash] などのプレースホルダーは、webpack ランタイムでチャンク ID からプレースホルダー値へのマッピングを出力バンドルに追加する必要があります。これによりサイズが増加し、チャンクのプレースホルダー値が変更された場合にバンドルが無効になる可能性があります。

デフォルトでは、[id].js が使用されるか、output.filename から推測された値が使用されます ([name] は [id] に置き換えられるか、[id]. が先頭に追加されます)。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js',
  },
};

関数としての使用法

webpack.config.js

module.exports = {
  //...
  output: {
    chunkFilename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  },
};

output.chunkFormat

false string: 'array-push' | 'commonjs' | 'module' | <任意の文字列>

チャンクのフォーマット (デフォルトで含まれるフォーマットは 'array-push' (web/WebWorker)、'commonjs' (node.js)、'module' (ESM) ですが、プラグインによって追加される場合があります)。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFormat: 'commonjs',
  },
};

output.chunkLoadTimeout

number = 120000

チャンクリクエストが期限切れになるまでのミリ秒数。このオプションは webpack 2.6.0 以降でサポートされています。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadTimeout: 30000,
  },
};

output.chunkLoadingGlobal

string = 'webpackChunkwebpack'

webpack がチャンクをロードするために使用するグローバル変数。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadingGlobal: 'myCustomFunc',
  },
};

output.chunkLoading

チャンクをロードする方法 (デフォルトで含まれる方法は、'jsonp' (web)、'import' (ESM)、'importScripts' (WebWorker)、'require' (同期 node.js)、'async-node' (非同期 node.js) ですが、プラグインによって追加される場合があります)。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoading: 'async-node',
  },
};

output.clean

5.20.0+

boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }

module.exports = {
  //...
  output: {
    clean: true, // Clean the output directory before emit.
  },
};

module.exports = {
  //...
  output: {
    clean: {
      dry: true, // Log the assets that should be removed instead of deleting them.
    },
  },
};

module.exports = {
  //...
  output: {
    clean: {
      keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'.
    },
  },
};

// or

module.exports = {
  //...
  output: {
    clean: {
      keep(asset) {
        return asset.includes('ignored/dir');
      },
    },
  },
};

フックでも使用できます。

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
  'Test',
  (asset) => {
    if (/ignored\/dir\//.test(asset)) return true;
  }
);

output.compareBeforeEmit

boolean = true

出力ファイルシステムに書き込む前に、出力されるファイルがすでに存在し、同じコンテンツを持っているかどうかをチェックするように webpack に指示します。

module.exports = {
  //...
  output: {
    compareBeforeEmit: false,
  },
};

output.crossOriginLoading

boolean = false string: 'anonymous' | 'use-credentials'

チャンクのクロスオリジンロードを有効にするように webpack に指示します。これは、target が 'web' に設定されている場合にのみ有効です。これは、オンデマンドチャンクをロードするためにスクリプトタグを追加することにより JSONP を使用します。

'anonymous' - 資格情報なしでクロスオリジンロードを有効にします。
'use-credentials' - 資格情報付きでクロスオリジンロードを有効にします。

output.cssChunkFilename

string function (pathData, assetInfo) => string

このオプションは、ディスク上の初期 CSS 出力ファイル以外の名前を決定します。指定できる値の詳細については、output.filename オプションを参照してください。

ここに絶対パスを指定してはなりません。ただし、'/' で区切られたフォルダーを含めてもかまいません。この指定されたパスは、output.path 値と組み合わせて、ディスク上の場所を特定します。

output.cssFilename

string function (pathData, assetInfo) => string

このオプションは、ディスク上の CSS 出力ファイルの名前を決定します。指定できる値の詳細については、output.filename オプションを参照してください。

output.cssHeadDataCompression

5.91.0+

boolean

このオプションは、CSS ファイルの head タグで生成されたメタデータを圧縮するかどうかを決定します。このオプションは、production ではデフォルトで true、development モードでは false になります。

output.devtoolFallbackModuleFilenameTemplate

string function (info)

上記のテンプレート文字列または関数が重複を生成する場合、フォールバックが使用されます。

output.devtoolModuleFilenameTemplate を参照してください。

output.devtoolModuleFilenameTemplate

string = 'webpack://[namespace]/[resource-path]?[loaders]' function (info) => string

このオプションは、devtool がモジュール名を必要とするオプションを使用する場合にのみ使用されます。

各ソースマップの sources 配列で使用される名前をカスタマイズします。これは、テンプレート文字列または関数を渡すことで行うことができます。たとえば、devtool: 'eval' を使用する場合などです。

webpack.config.js

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate:
      'webpack://[namespace]/[resource-path]?[loaders]',
  },
};

次の置換は、テンプレート文字列で使用できます (webpack の内部 ModuleFilenameHelpers を介して)。

テンプレート	説明
[absolute-resource-path]	絶対ファイル名
[all-loaders]	最初のローダーの名前までの自動ローダーと明示的なローダーとパラメーター
[hash]	モジュール識別子のハッシュ
[id]	モジュール識別子
[loaders]	最初のローダーの名前までの明示的なローダーとパラメーター
[resource]	ファイルの解決に使用されるパスと、最初のローダーで使用されるクエリパラメーター
[resource-path]	クエリパラメーターなしでファイルの解決に使用されるパス
[namespace]	モジュールの名前空間。これは通常、ライブラリとしてビルドする場合はライブラリ名で、それ以外の場合は空です

関数を使用する場合、同じオプションは info パラメーターを介してキャメルケースで使用できます。

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate: (info) => {
      return `webpack:///${info.resourcePath}?${info.loaders}`;
    },
  },
};

複数のモジュールが同じ名前になる場合、これらのモジュールには代わりに output.devtoolFallbackModuleFilenameTemplate が使用されます。

output.devtoolNamespace

string

このオプションは、output.devtoolModuleFilenameTemplate で使用されるモジュールの名前空間を決定します。指定しない場合、デフォルトで output.uniqueName の値になります。これは、webpack でビルドされた複数のライブラリをロードするときにソースファイルパスの衝突を防ぐために使用されます。

たとえば、library1 と library2 の名前空間を持つ 2 つのライブラリがあり、両方にファイル ./src/index.js (内容が異なる可能性がある) がある場合、これらのファイルは webpack://library1/./src/index.js および webpack://library2/./src/index.js として公開されます。

output.enabledChunkLoadingTypes

[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <任意の文字列>]

エントリポイントで使用するために有効になっているチャンクローディングタイプのリスト。webpack によって自動的に入力されます。エントリオプションとして関数を使用し、そこから chunkLoading オプションを返す場合にのみ必要です。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    enabledChunkLoadingTypes: ['jsonp', 'require'],
  },
};

output.enabledLibraryTypes

[string]

エントリポイントで使用するために有効になっているライブラリタイプのリスト。

module.exports = {
  //...
  output: {
    enabledLibraryTypes: ['module'],
  },
};

output.enabledWasmLoadingTypes

[string]

エントリポイントで使用するために有効になっている wasm ローディングタイプのリスト。

module.exports = {
  //...
  output: {
    enabledWasmLoadingTypes: ['fetch'],
  },
};

output.environment

生成されたランタイムコードで使用できるES機能の種類をwebpackに伝えます。

module.exports = {
  output: {
    environment: {
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: true,
      // The environment supports async function and await ('async function () { await ... }').
      asyncFunction: true,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports const and let for variable declarations.
      const: true,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: true,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports an async import() when creating a worker, only for web targets at the moment.
      dynamicImportInWorker: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: true,
      // The environment supports 'globalThis'.
      globalThis: true,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
      // The environment supports optional chaining ('obj?.a' or 'obj?.()').
      optionalChaining: true,
      // The environment supports template literals.
      templateLiteral: true,
    },
  },
};

output.filename

string function (pathData, assetInfo) => string

このオプションは、各出力バンドルの名前を決定します。バンドルは、output.path オプションで指定されたディレクトリに書き込まれます。

単一のentryポイントの場合、これは静的な名前にすることができます。

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'bundle.js',
  },
};

ただし、複数のエントリポイント、コード分割、またはさまざまなプラグインを介して複数のバンドルを作成する場合は、次のいずれかの置換を使用して、各バンドルに一意の名前を付ける必要があります...

エントリ名を使用する

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].bundle.js',
  },
};

内部チャンクIDを使用する

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[id].bundle.js',
  },
};

生成されたコンテンツから生成されたハッシュを使用する

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[contenthash].bundle.js',
  },
};

複数の置換を組み合わせる

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

関数を使用してファイル名を返す

webpack.config.js

module.exports = {
  //...
  output: {
    filename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  },
};

詳細については、キャッシュガイドを必ずお読みください。このオプションを設定するだけでなく、さらに多くの手順が必要です。

このオプションはファイル名と呼ばれていますが、'js/[name]/bundle.js'のようにフォルダ構造を作成することもできます。

このオプションは、オンデマンドでロードされるチャンクの出力ファイルには影響しません。最初にロードされる出力ファイルにのみ影響します。オンデマンドでロードされるチャンクファイルには、output.chunkFilenameオプションが使用されます。ローダーによって作成されたファイルも影響を受けません。この場合、特定のローダーで使用可能なオプションを試す必要があります。

テンプレート文字列

次の置換は、テンプレート文字列で使用できます（webpackの内部TemplatedPathPluginを介して）。

コンパイルレベルで使用可能な置換

テンプレート	説明
[fullhash]	コンパイルの完全なハッシュ
[hash]	同じですが、非推奨です

チャンクレベルで使用可能な置換

テンプレート	説明
[id]	[id]
チャンクのID	[name]
チャンクの名前。設定されていない場合はチャンクのID	[chunkhash]
チャンクのすべての要素を含む、チャンクのハッシュ	[contenthash]

このコンテンツタイプの要素のみを含むチャンクのハッシュ（optimization.realContentHashの影響を受ける）

テンプレート	説明
[id]	モジュールレベルで使用可能な置換
[moduleid]	同じですが、非推奨です
[hash]	モジュールのID
[modulehash]	同じですが、非推奨です
チャンクのすべての要素を含む、チャンクのハッシュ	モジュールのハッシュ

モジュールのコンテンツのハッシュ

テンプレート	説明
ファイルレベルで使用可能な置換	[file]
クエリまたはフラグメントなしのファイル名とパス	[query]
先頭に`?`が付いたクエリ	[fragment]
先頭に`#`が付いたフラグメント	[base]
パスなしのファイル名のみ（拡張子を含む）	同じですが、非推奨です
[filebase]	[path]
チャンクのID	ファイル名なしのパスのみ
拡張子またはパスなしのファイル名のみ	[ext]

先頭に.が付いた拡張子（output.filenameでは使用できません）

テンプレート	説明
URLレベルで使用可能な置換	[url]

[file]は[path][base]に等しくなります。[base]は[name][ext]に等しくなります。完全なパスは、[path][name][ext][query][fragment]または[path][base][query][fragment]または[file][query][fragment]です。

ハッシュの長さ（[hash]、[contenthash]、または[chunkhash]）は、[hash:16]（デフォルトは20）を使用して指定できます。または、output.hashDigestLengthを指定して、長さをグローバルに構成します。

実際のファイル名でいずれかのプレースホルダーを使用したい場合に、プレースホルダーの置換をフィルタリングすることができます。たとえば、ファイル[name].jsを出力するには、角括弧の間にバックスラッシュを追加して[name]プレースホルダーをエスケープする必要があります。これにより、[\name\]は、アセットのnameで置換されるのではなく、[name]が生成されます。

例：[\id\]は、idで置換されるのではなく、[id]を生成します。

type PathData = {
  hash: string;
  hashWithLength: (number) => string;
  chunk: Chunk | ChunkPathData;
  module: Module | ModulePathData;
  contentHashType: string;
  contentHash: string;
  contentHashWithLength: (number) => string;
  filename: string;
  url: string;
  runtime: string | SortableSet<string>;
  chunkGraph: ChunkGraph;
};
type ChunkPathData = {
  id: string | number;
  name: string;
  hash: string;
  hashWithLength: (number) => string;
  contentHash: Record<string, string>;
  contentHashWithLength: Record<string, (number) => string>;
};
type ModulePathData = {
  id: string | number;
  hash: string;
  hashWithLength: (number) => string;
};

一部のコンテキストでは、プロパティは生の値の代わりにJavaScriptコード式を使用します。このような場合、`WithLength`バリアントが利用可能であり、元の値をスライスする代わりにこれを使用する必要があります。

output.globalObject

string = 'self'

特にlibrary.typeが'umd'の場合、ライブラリをターゲットにする場合、このオプションは、ライブラリをマウントするために使用されるグローバルオブジェクトを示します。UMDビルドをブラウザとNode.jsの両方で利用できるようにするには、output.globalObjectオプションを'this'に設定します。Webのようなターゲットの場合、デフォルトはselfです。

エントリポイントの戻り値は、output.library.nameの値を使用してグローバルオブジェクトに割り当てられます。typeオプションの値に応じて、グローバルオブジェクトはそれぞれ、たとえば、self、global、またはglobalThisに変更される可能性があります。

webpack.config.js

module.exports = {
  // ...
  output: {
    library: {
      name: 'myLib',
      type: 'umd',
    },
    filename: 'myLib.js',
    globalObject: 'this',
  },
};

例

output.hashDigest

string = 'hex'

ハッシュを生成するときに使用するエンコーディング。Node.JSの`hash.digest`のすべてのエンコーディングがサポートされています。ファイル名に`'base64'`を使用すると、アルファベットに文字`/`が含まれているため、問題が発生する可能性があります。同様に、`'latin1'`には任意の文字が含まれる可能性があります。

output.hashDigestLength

number = 20

`webpack v5.65.0+`の場合、`experiments.futureDefaults`が有効になっている場合、`hashDigestLength`オプションのデフォルト値として`16`が使用されます。

output.hashFunction

string = 'md4' function

module.exports = {
  //...
  output: {
    hashFunction: require('metrohash').MetroHash64,
  },
};

使用するハッシュアルゴリズム。Node.JSのcrypto.createHashのすべての関数がサポートされています。4.0.0-alpha2以降、hashFunctionはカスタムハッシュ関数のコンストラクターにすることができます。パフォーマンス上の理由から、非cryptoハッシュ関数を提供できます。

`webpack v5.54.0+`以降、`hashFunction`はより高速なアルゴリズムとして`xxhash64`をサポートしており、`experiments.futureDefaults`が有効になっている場合は、デフォルトとして使用されます。

output.hashSalt

Node.JSの`hash.update`を介してハッシュを更新するためのオプションのソルト。

output.hotUpdateChunkFilename

string = '[id].[fullhash].hot-update.js'

ホットアップデートチャンクのファイル名をカスタマイズします。可能な値の詳細については、output.filenameオプションを参照してください。

webpack.config.js

module.exports = {
  //...
  output: {
    hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
  },
};

通常、`output.hotUpdateChunkFilename`を変更する必要はありません。

string

output.hotUpdateGlobal

targetが'web'に設定されている場合にのみ使用され、ホットアップデートのロードにJSONPを使用します。

JSONP関数は、ホットアップデートチャンクを非同期にロードするために使用されます。

詳細については、`output.chunkLoadingGlobal`を参照してください。

output.hotUpdateMainFilename

string = '[runtime].[fullhash].hot-update.json' function

通常、`output.hotUpdateMainFilename`を変更する必要はありません。

boolean = true

output.iife

module.exports = {
  //...
  output: {
    iife: true,
  },
};

エミットされたコードの周りにIIFEラッパーを追加するようにwebpackに指示します。

5.81.0+

output.ignoreBrowserWarnings

boolean = false

webpack.config.js

module.exports = {
  //...
  output: {
    ignoreBrowserWarnings: true,
  },
};

本番環境でブラウザコンソールからの警告を非表示にします。このオプションは、ターミナル/コンソール出力には影響しません。

output.importFunctionName

string = 'import'

webpack.config.js

module.exports = {
  //...
  output: {
    importFunctionName: '__import__',
  },
};

ネイティブの`import()`関数の名前。`dynamic-import-polyfill`などを使用してポリフィルに使用できます。

string

output.importMetaName

webpack.config.js

module.exports = {
  //...
  output: {
    importMetaName: 'pseudoImport.meta',
  },
};

ネイティブの`import.meta`オブジェクトの名前（ポリフィルと交換可能）。

output.library

エントリポイントのエクスポートを公開するライブラリを出力します。

タイプ：string | string[] | object

webpack.config.js

module.exports = {
  // …
  entry: './src/index.js',
  output: {
    library: 'MyLibrary',
  },
};

例を見てみましょう。

export function hello(name) {
  console.log(`hello ${name}`);
}

src/index.jsエントリに関数をエクスポートしたとします

<script src="https://example.org/path/to/my-library.js"></script>
<script>
  MyLibrary.hello('webpack');
</script>

これで、変数MyLibraryがエントリファイルのエクスポートにバインドされ、webpackバンドルされたライブラリを使用する方法は次のとおりです

上記の例では、単一のエントリファイルをentryに渡していますが、webpackはさまざまな種類のエントリポイント（たとえば、arrayやobject）を受け入れることができます。
```
module.exports = {
  // …
  entry: ['./src/a.js', './src/b.js'], // only exports in b.js will be exposed
  output: {
    library: 'MyLibrary',
  },
};
```

arrayをentryポイントとして指定した場合、配列の最後の1つだけが公開されます。

module.exports = {
  // …
  entry: {
    a: './src/a.js',
    b: './src/b.js',
  },
  output: {
    filename: '[name].js',
    library: ['MyLibrary', '[name]'], // name is a placeholder here
  },
};

objectがentryポイントとして指定された場合、すべてのエントリはlibraryのarray構文を使用して公開できます

<script src="https://example.org/path/to/a.js"></script>
<script src="https://example.org/path/to/b.js"></script>
<script>
  MyLibrary.a.hello('webpack');
  MyLibrary.b.hello('webpack');
</script>

a.jsとb.jsの両方が関数helloをエクスポートすると仮定すると、ライブラリを使用する方法は次のとおりです

詳細については、この例を参照してください。

module.exports = {
  // …
  entry: {
    main: {
      import: './src/index.js',
      library: {
        // all options under `output.library` can be used here
        name: 'MyLibrary',
        type: 'umd',
        umdNamedDefine: true,
      },
    },
    another: {
      import: './src/another.js',
      library: {
        name: 'AnotherLibrary',
        type: 'commonjs2',
      },
    },
  },
};

エントリポイントごとにライブラリオプションを構成する場合、上記の構成は期待どおりに機能しないことに注意してください。それぞれのエントリの下でこれを行う方法を次に示します

5.78.0+

output.library.amdContainer

module.exports = {
  // …
  output: {
    library: {
      amdContainer: 'window["clientContainer"]',
      type: 'amd', // or 'amd-require'
    },
  },
};

これにより、次のバンドルが生成されます。

window['clientContainer'].define(/*define args*/); // or 'amd-require' window['clientContainer'].require(/*require args*/);

output.library.name

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
    },
  },
};

ライブラリの名前を指定します。

型

string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}

output.library.type

ライブラリの公開方法を設定します。

型: string
デフォルトで含まれる型は、'var', 'module', 'assign', 'assign-properties', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'commonjs-module', 'commonjs-static', 'amd', 'amd-require', 'umd', 'umd2', 'jsonp' および 'system' ですが、プラグインによって追加される場合もあります。

以下の例では、エントリポイントから返される値を表すために _entry_return_ を使用します。

変数を公開する

これらのオプションは、エントリポイントの戻り値 (エントリポイントがエクスポートした値) を、output.library.name で指定された名前で、バンドルがインクルードされたスコープに割り当てます。

型: 'var'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
    },
  },
};

ライブラリがロードされると、**エントリポイントの戻り値** が変数に割り当てられます。

var MyLibrary = _entry_return_;

// In a separate script with `MyLibrary` loaded…
MyLibrary.doSomething();

型: 'assign'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign',
    },
  },
};

これにより、既存の値を再割り当てする可能性のある暗黙的なグローバルが生成されます (注意して使用してください)。

MyLibrary = _entry_return_;

MyLibrary が以前に定義されていない場合、ライブラリはグローバルスコープに設定されることに注意してください。

型: 'assign-properties'

5.16.0+

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'assign-properties',
    },
  },
};

type: 'assign' と似ていますが、MyLibrary がすでに存在する場合は再利用するため、より安全なオプションです。

// only create MyLibrary if it doesn't exist
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// then copy the return value to MyLibrary
// similarly to what Object.assign does

// for instance, you export a `hello` function in your entry as follow
export function hello(name) {
  console.log(`Hello ${name}`);
}

// In another script with MyLibrary loaded
// you can run `hello` function like so
MyLibrary.hello('World');

オブジェクト割り当てによる公開

これらのオプションは、エントリポイントの戻り値 (エントリポイントがエクスポートした値) を、output.library.name で定義された名前で、特定のオブジェクトに割り当てます。

型: 'this'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'this',
    },
  },
};

**エントリポイントの戻り値** が output.library.name で指定された名前のプロパティとして this に割り当てられます。this の意味は任意です。

this['MyLibrary'] = _entry_return_;

// In a separate script...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if `this` is window

型: 'window'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'window',
    },
  },
};

**エントリポイントの戻り値** が output.library.name の値を使用して window オブジェクトに割り当てられます。

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

型: 'global'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'global',
    },
  },
};

**エントリポイントの戻り値** が output.library.name の値を使用してグローバルオブジェクトに割り当てられます。target の値に応じて、グローバルオブジェクトはそれぞれ self, global, globalThis に変更される可能性があります。

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

型: 'commonjs'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'commonjs',
    },
  },
};

**エントリポイントの戻り値** が output.library.name の値を使用して exports オブジェクトに割り当てられます。名前が示すように、これは CommonJS 環境で使用されます。

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

モジュール定義システム

これらのオプションは、さまざまなモジュールシステムとの互換性を確保するための完全なヘッダーが付属したバンドルを生成します。output.library.name オプションは、次の output.library.type オプションでは異なる意味を持ちます。

型: 'module'

module.exports = {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // do not specify a `name` here
      type: 'module',
    },
  },
};

ESモジュールを出力します。

ただし、この機能はまだ実験段階であり、まだ完全にサポートされていないため、事前に experiments.outputModule を有効にしてください。さらに、このスレッドで開発の進捗状況を追跡できます。

型: 'commonjs2'

module.exports = {
  // …
  output: {
    library: {
      // note there's no `name` here
      type: 'commonjs2',
    },
  },
};

**エントリポイントの戻り値** が module.exports に割り当てられます。名前が示すように、これは Node.js (CommonJS) 環境で使用されます。

module.exports = _entry_return_;

require('MyLibrary').doSomething();

type: commmonjs2 で output.library.name を指定すると、エントリポイントの戻り値が module.exports.[output.library.name] に割り当てられます。

型: 'commonjs-static'

5.66.0+

module.exports = {
  // …
  output: {
    library: {
      // note there's no `name` here
      type: 'commonjs-static',
    },
  },
};

個々のエクスポートは、module.exports のプロパティとして設定されます。名前の「static」は、出力が静的に分析可能であることを意味し、したがって名前付きエクスポートは Node.js を介して ESM にインポート可能です。

入力

export function doSomething() {}

出力

function doSomething() {}

// …

exports.doSomething = __webpack_exports__.doSomething;

消費 (CommonJS)

const { doSomething } = require('./output.cjs'); // doSomething => [Function: doSomething]

消費 (ESM)

import { doSomething } from './output.cjs'; // doSomething => [Function: doSomething]

型: 'amd'

これにより、ライブラリが AMD モジュールとして公開されます。

AMD モジュールでは、エントリチャンク (例: <script> タグでロードされた最初のスクリプト) が、RequireJS または (almond などの) 互換性のあるローダーによって通常提供される、define や require などの特定のプロパティで定義されている必要があります。そうでない場合、生成された AMD バンドルを直接ロードすると、define is not defined のようなエラーが発生します。

次の構成では...

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd',
    },
  },
};

生成された出力は、"MyLibrary" という名前で定義されます。つまり、

define('MyLibrary', [], function () {
  return _entry_return_;
});

バンドルはスクリプトタグの一部として含めることができ、バンドルは次のように呼び出すことができます。

require(['MyLibrary'], function (MyLibrary) {
  // Do something with the library...
});

output.library.name が未定義の場合、代わりに次のように生成されます。

define(function () {
  return _entry_return_;
});

このバンドルは、<script> タグで直接ロードすると、期待どおりに機能しないか、まったく機能しません (almond ローダーの場合)。RequireJS 互換の非同期モジュールローダーを介して、そのファイルへの実際のパスを通じてのみ機能するため、この特定のセットアップでは、サーバーで直接公開される場合は、output.path と output.filename が重要になる可能性があります。

型: 'amd-require'

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'amd-require',
    },
  },
};

これにより、出力が即時実行される AMD require(dependencies, factory) ラッパーでパッケージ化されます。

'amd-require' 型を使用すると、後で別途呼び出す必要なく、AMD の依存関係を使用できます。'amd' 型と同様に、これは webpack の出力がロードされる環境で適切な require 関数が利用可能であることに依存します。

この型では、ライブラリ名を使用できません。

型: 'umd'

これにより、ライブラリがすべてのモジュール定義で公開され、CommonJS、AMD、およびグローバル変数として動作できます。詳細については、UMD リポジトリを参照してください。

この場合、モジュールに名前を付けるには library.name プロパティが必要です。

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
    },
  },
};

そして最後に、出力は次のようになります。

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(global, function () {
  return _entry_return_;
});

library.name を省略すると、オブジェクト割り当てセクションで説明したように、エントリポイントから返されたすべてのプロパティがルートオブジェクトに直接割り当てられることに注意してください。例

module.exports = {
  //...
  output: {
    type: 'umd',
  },
};

出力は次のようになります。

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else {
    var a = factory();
    for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(global, function () {
  return _entry_return_;
});

ターゲットごとに異なる名前に対して library.name のオブジェクトを指定できます。

module.exports = {
  //...
  output: {
    library: {
      name: {
        root: 'MyLibrary',
        amd: 'my-library',
        commonjs: 'my-common-library',
      },
      type: 'umd',
    },
  },
};

型: 'system'

これにより、ライブラリが System.register モジュールとして公開されます。この機能は、webpack 4.30.0 で最初にリリースされました。

System モジュールでは、webpack バンドルが実行されるときに、ブラウザにグローバル変数 System が存在する必要があります。System.register 形式にコンパイルすると、追加の構成なしで System.import('/bundle.js') を実行でき、webpack バンドルが System モジュールレジストリにロードされます。

module.exports = {
  //...
  output: {
    library: {
      type: 'system',
    },
  },
};

出力

System.register([], function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
  return {
    execute: function () {
      // ...
    },
  };
});

output.library.type が system に設定されていることに加えて、output.library.name を構成に追加すると、出力バンドルには System.register の引数としてライブラリ名が含まれます。

System.register(
  'MyLibrary',
  [],
  function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
    return {
      execute: function () {
        // ...
      },
    };
  }
);

その他の型

型: 'jsonp'

module.exports = {
  // …
  output: {
    library: {
      name: 'MyLibrary',
      type: 'jsonp',
    },
  },
};

これにより、エントリポイントの戻り値が jsonp ラッパーにラップされます。

MyLibrary(_entry_return_);

ライブラリの依存関係は、externals 構成によって定義されます。

output.library.export

ライブラリとして公開する必要があるエクスポートを指定します。

型: string | string[]

デフォルトでは undefined で、オブジェクト全体 (名前空間) をエクスポートします。以下の例では、output.library.type: 'var' を使用した場合のこの構成の効果を示します。

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: 'default',
    },
  },
};

エントリポイントのデフォルトのエクスポートがライブラリ名に割り当てられます。

// if your entry has a default export
var MyLibrary = _entry_return_.default;

output.library.export に配列を渡すこともできます。これは、ライブラリ名に割り当てるモジュールへのパスとして解釈されます。

module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'var',
      export: ['default', 'subModule'],
    },
  },
};

こちらがライブラリのコードです。

var MyLibrary = _entry_return_.default.subModule;

output.library.auxiliaryComment

UMD ラッパーにコメントを追加します。

型: string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }

各 umd タイプに同じコメントを挿入するには、auxiliaryComment を文字列に設定します。

module.exports = {
  // …
  mode: 'development',
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      auxiliaryComment: 'Test Comment',
    },
  },
};

これにより、以下が得られます。

(function webpackUniversalModuleDefinition(root, factory) {
  //Test Comment
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  //Test Comment
  else if (typeof define === 'function' && define.amd) define([], factory);
  //Test Comment
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  //Test Comment
  else root['MyLibrary'] = factory();
})(self, function () {
  return _entry_return_;
});

詳細な制御を行うには、オブジェクトを渡します。

module.exports = {
  // …
  mode: 'development',
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      auxiliaryComment: {
        root: 'Root Comment',
        commonjs: 'CommonJS Comment',
        commonjs2: 'CommonJS2 Comment',
        amd: 'AMD Comment',
      },
    },
  },
};

output.library.umdNamedDefine

boolean

output.library.type: "umd" を使用する場合、output.library.umdNamedDefine を true に設定すると、UMD ビルドの AMD モジュールに名前が付けられます。そうでない場合は、匿名の define が使用されます。

module.exports = {
  //...
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      umdNamedDefine: true,
    },
  },
};

AMD モジュールは次のようになります。

define('MyLibrary', [], factory);

output.libraryExport

string [string]

libraryTarget を介して公開されるモジュールを設定します。デフォルトは undefined であり、libraryTarget を空文字列（例: ''）に設定した場合も同じ動作となり、オブジェクト全体（名前空間）がエクスポートされます。以下の例では、libraryTarget: 'var' を使用した場合の設定効果を示します。

以下の設定がサポートされています。

libraryExport: 'default' - **エントリポイントのデフォルトのエクスポート** がライブラリターゲットに割り当てられます。

// if your entry has a default export of `MyDefaultModule`
var MyDefaultModule = _entry_return_.default;

libraryExport: 'MyModule' - **指定されたモジュール** がライブラリターゲットに割り当てられます。

var MyModule = _entry_return_.MyModule;

libraryExport: ['MyModule', 'MySubModule'] - 配列は、ライブラリターゲットに割り当てる **モジュールへのパス** として解釈されます。

var MySubModule = _entry_return_.MyModule.MySubModule;

上記で指定された libraryExport 設定を使用した場合、結果として得られるライブラリは次のように利用できます。

MyDefaultModule.doSomething();
MyModule.doSomething();
MySubModule.doSomething();

output.libraryTarget

string = 'var'

ライブラリの公開方法を設定します。次のいずれかのオプションを使用できます。このオプションは、output.library に割り当てられた値と組み合わせて機能することに注意してください。以下の例では、output.library の値が MyLibrary として設定されていると想定します。

変数の公開

これらのオプションは、エントリポイントの戻り値（例：エントリポイントがエクスポートした値）を、バンドルが含まれるスコープで output.library によって提供される名前に割り当てます。

libraryTarget: 'var'

ライブラリがロードされると、**エントリポイントの戻り値** が変数に割り当てられます。

var MyLibrary = _entry_return_;

// In a separate script...
MyLibrary.doSomething();

libraryTarget: 'assign'

これにより、既存の値を再割り当てする可能性のある暗黙的なグローバルが生成されます (注意して使用してください)。

MyLibrary = _entry_return_;

MyLibrary が事前に定義されていない場合、ライブラリはグローバルスコープに設定されることに注意してください。

libraryTarget: 'assign-properties'

5.16.0+

ターゲットオブジェクトが存在する場合は、戻り値をそのターゲットオブジェクトにコピーし、そうでない場合は、最初にターゲットオブジェクトを作成します。

// create the target object if it doesn't exist
MyLibrary = typeof MyLibrary === 'undefined' ? {} : MyLibrary;
// then copy the return value to MyLibrary
// similarly to what Object.assign does

// for instance, you export a `hello` function in your entry as follow
export function hello(name) {
  console.log(`Hello ${name}`);
}

// In another script running MyLibrary
// you can run `hello` function like so
MyLibrary.hello('World');

オブジェクト代入による公開

これらのオプションは、エントリポイントの戻り値（例：エントリポイントがエクスポートした値）を、output.library で定義された名前で特定のオブジェクトに割り当てます。

output.library に空ではない文字列が割り当てられていない場合、デフォルトの動作では、エントリポイントによって返されるすべてのプロパティは、特定の output.libraryTarget に対して定義されたオブジェクトに、以下のコードフラグメントを介して割り当てられます。

(function (e, a) {
  for (var i in a) {
    e[i] = a[i];
  }
})(output.libraryTarget, _entry_return_);

libraryTarget: 'this'

**エントリポイントの戻り値** は、output.library によって名前が付けられたプロパティの下で this に割り当てられます。this の意味はユーザーに委ねられます。

this['MyLibrary'] = _entry_return_;

// In a separate script...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if this is window

libraryTarget: 'window'

**エントリポイントの戻り値** は、output.library の値を使用して window オブジェクトに割り当てられます。

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

libraryTarget: 'global'

**エントリポイントの戻り値** は、output.library の値を使用して global オブジェクトに割り当てられます。

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

libraryTarget: 'commonjs'

**エントリポイントの戻り値** は、output.library の値を使用して exports オブジェクトに割り当てられます。名前が示すように、これは CommonJS 環境で使用されます。

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

モジュール定義システム

これらのオプションを使用すると、さまざまなモジュールシステムとの互換性を確保するために完全なヘッダーが付いたバンドルが生成されます。output.library オプションは、次の output.libraryTarget オプションの下で異なる意味を持ちます。

libraryTarget: 'module'

ES モジュールを出力します。事前に experiments.outputModule を有効にしてください。

この機能はまだ完全にサポートされていないことに注意してください。進捗状況については、このスレッドで追跡してください。

libraryTarget: 'commonjs2'

**エントリポイントの戻り値** は module.exports に割り当てられます。名前が示すように、これは CommonJS 環境で使用されます。

module.exports = _entry_return_;

require('MyLibrary').doSomething();

output.library はこの特定の output.libraryTarget では使用できないことに注意してください。詳細については、この issue をお読みください。

libraryTarget: 'amd'

これにより、ライブラリが AMD モジュールとして公開されます。

次の構成では...

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'amd',
  },
};

生成された出力は、"MyLibrary" という名前で定義されます。つまり、

define('MyLibrary', [], function () {
  return _entry_return_;
});

バンドルはスクリプトタグの一部として含めることができ、バンドルは次のように呼び出すことができます。

require(['MyLibrary'], function (MyLibrary) {
  // Do something with the library...
});

output.library が未定義の場合、代わりに以下が生成されます。

define([], function () {
  return _entry_return_;
});

libraryTarget: 'amd-require'

これにより、出力が即時実行される AMD require(dependencies, factory) ラッパーでパッケージ化されます。

'amd-require' ターゲットを使用すると、後で個別に呼び出す必要なく、AMD 依存関係を使用できます。'amd' ターゲットと同様に、これは、webpack 出力がロードされる環境で適切な require 関数が利用可能であることに依存します。

このターゲットでは、ライブラリ名は無視されます。

libraryTarget: 'umd'

これにより、すべてのモジュール定義の下でライブラリが公開され、CommonJS、AMD、グローバル変数として動作できるようになります。詳細については、UMD リポジトリを参照してください。

この場合、モジュールに名前を付けるには library プロパティが必要です。

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd',
  },
};

そして最後に、出力は次のようになります。

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['MyLibrary'] = factory();
  else root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function () {
  return _entry_return_;
});

library を省略すると、オブジェクト代入セクションで説明されているように、エントリポイントによって返されるすべてのプロパティがルートオブジェクトに直接割り当てられることに注意してください。例:

module.exports = {
  //...
  output: {
    libraryTarget: 'umd',
  },
};

出力は次のようになります。

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else {
    var a = factory();
    for (var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(typeof self !== 'undefined' ? self : this, function () {
  return _entry_return_;
});

webpack 3.1.0 以降では、ターゲットごとに異なる名前の library にオブジェクトを指定できます。

module.exports = {
  //...
  output: {
    library: {
      root: 'MyLibrary',
      amd: 'my-library',
      commonjs: 'my-common-library',
    },
    libraryTarget: 'umd',
  },
};

libraryTarget: 'system'

これにより、ライブラリが System.register モジュールとして公開されます。この機能は、webpack 4.30.0 で最初にリリースされました。

module.exports = {
  //...
  output: {
    libraryTarget: 'system',
  },
};

出力

System.register([], function (_export) {
  return {
    setters: [],
    execute: function () {
      // ...
    },
  };
});

output.libraryTarget が system に設定されていることに加えて、構成に output.library を追加すると、出力バンドルには System.register の引数としてライブラリ名が含まれます。

System.register('my-library', [], function (_export) {
  return {
    setters: [],
    execute: function () {
      // ...
    },
  };
});

SystemJS コンテキストには __system_context__ を介してアクセスできます。

// Log the URL of the current SystemJS module
console.log(__system_context__.meta.url);

// Import a SystemJS module, with the current SystemJS module's url as the parentUrl
__system_context__.import('./other-file.js').then((m) => {
  console.log(m);
});

その他のターゲット

libraryTarget: 'jsonp'

これにより、エントリポイントの戻り値が jsonp ラッパーにラップされます。

MyLibrary(_entry_return_);

ライブラリの依存関係は、externals 構成によって定義されます。

output.module

output.ignoreBrowserWarnings

JavaScript ファイルをモジュール型として出力します。実験的な機能であるため、デフォルトでは無効になっています。

有効にすると、webpack は内部的に output.iife を false、output.scriptType を 'module' に設定し、terserOptions.module を true に設定します。

webpack を使用してライブラリをコンパイルし、他のユーザーが利用できるようにする場合は、output.module が true のときに output.libraryTarget を 'module' に設定してください。

module.exports = {
  //...
  experiments: {
    outputModule: true,
  },
  output: {
    module: true,
  },
};

output.path

string = path.join(process.cwd(), 'dist')

出力ディレクトリを **絶対** パスで指定します。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
  },
};

このパラメーター内の[fullhash]は、コンパイルのハッシュ値に置き換えられることに注意してください。詳細はキャッシュガイドを参照してください。

output.pathinfo

boolean=true string: 'verbose'

webpackに対して、バンドルに含まれるモジュールに関する情報を含むコメントをバンドルに含めるように指示します。このオプションのデフォルトは、developmentモードではtrue、productionモードではfalseです。'verbose'を指定すると、エクスポート、ランタイム要件、および離脱などのより多くの情報が表示されます。

webpack.config.js

module.exports = {
  //...
  output: {
    pathinfo: true,
  },
};

output.publicPath

型
- 関数
- string
  output.publicPathは、webおよびweb-workerターゲットの場合、デフォルトで'auto'になります。そのユースケースについては、このガイドを参照してください。

これは、オンデマンドローディングや画像、ファイルなどの外部リソースのロードを使用する場合に重要なオプションです。誤った値を指定すると、これらのリソースのロード中に404エラーが発生します。

このオプションは、ブラウザで参照される際の出力ディレクトリの**パブリックURL**を指定します。相対URLはHTMLページ（または<base>タグ）に対して相対的に解決されます。サーバー相対URL、プロトコル相対URL、または絶対URLも可能であり、場合によっては必要です。例えば、CDNでアセットをホストする場合などです。

このオプションの値は、ランタイムまたはローダーによって作成されたすべてのURLにプレフィックスとして付加されます。このため、**このオプションの値はほとんどの場合、/で終わります**。

考慮すべきルール：HTMLページから見たoutput.pathのURL。

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/',
  },
};

この構成の場合

webpack.config.js

module.exports = {
  //...
  output: {
    publicPath: '/assets/',
    chunkFilename: '[id].chunk.js',
  },
};

チャンクへのリクエストは/assets/4.chunk.jsのようになります。

HTMLを出力するローダーは、次のようなものを出力する可能性があります。

<link href="/assets/spinner.gif" />

またはCSSで画像をロードする場合

background-image: url(/assets/spinner.gif);

webpack-dev-serverもpublicPathからヒントを得て、出力ファイルの提供元を決定します。

例

module.exports = {
  //...
  output: {
    // One of the below
    publicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.
    publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
    publicPath: '/assets/', // server-relative
    publicPath: 'assets/', // relative to HTML page
    publicPath: '../assets/', // relative to HTML page
    publicPath: '', // relative to HTML page (same directory)
  },
};

出力ファイルのpublicPathがコンパイル時に不明な場合は、空白のままにして、エントリファイルで自由変数__webpack_public_path__を使用してランタイム時に動的に設定できます。

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

__webpack_public_path__の詳細については、この議論を参照してください。

output.scriptType

string: 'module' | 'text/javascript' boolean = false

このオプションを使用すると、<script type="module" ...>などのカスタムスクリプトタイプで非同期チャンクをロードできます。

module.exports = {
  //...
  output: {
    scriptType: 'module',
  },
};

output.sourceMapFilename

string = '[file].map[query]'

ソースマップの名前付け方法を構成します。devtoolが'source-map'に設定されている場合のみ有効になり、出力ファイルが書き込まれます。

output.filenameの[name]、[id]、[fullhash]、および[chunkhash]の置換を使用できます。それらに加えて、テンプレート文字列のファイル名レベルにリストされている置換を使用できます。

output.sourcePrefix

string = ''

出力バンドルの各行のプレフィックスを変更します。

webpack.config.js

module.exports = {
  //...
  output: {
    sourcePrefix: '\t',
  },
};

output.strictModuleErrorHandling

パフォーマンスコストをかけて、EcmaScript Modules仕様に従ってモジュールロードのエラーを処理します。

型：boolean
利用可能：5.25.0+

module.exports = {
  //...
  output: {
    strictModuleErrorHandling: true,
  },
};

output.strictModuleExceptionHandling

output.ignoreBrowserWarnings

webpackに、requireされたときに例外をスローする場合、モジュールインスタンスキャッシュ（require.cache）からモジュールを削除するように指示します。

パフォーマンス上の理由から、デフォルトはfalseです。

falseに設定すると、モジュールはキャッシュから削除されず、最初のrequire呼び出しでのみ例外がスローされます（node.jsと互換性がなくなります）。

たとえば、module.jsを考えてみましょう。

throw new Error('error');

strictModuleExceptionHandlingがfalseに設定されている場合、最初のrequireのみが例外をスローします。

// with strictModuleExceptionHandling = false
require('module'); // <- throws
require('module'); // <- doesn't throw

代わりに、strictModuleExceptionHandlingがtrueに設定されている場合、このモジュールのすべてのrequireが例外をスローします。

// with strictModuleExceptionHandling = true
require('module'); // <- throws
require('module'); // <- also throws

output.trustedTypes

true string object

5.37.0+

Trusted Typesの互換性を制御します。有効にすると、webpackはTrusted Typesのサポートを検出し、サポートされている場合は、Trusted Typesポリシーを使用して、動的にロードするスクリプトURLを作成します。アプリケーションがrequire-trusted-types-for Content Security Policyディレクティブの下で実行される場合に使用します。

デフォルトでは無効になっています（互換性なし、スクリプトURLは文字列です）。

trueに設定すると、webpackはoutput.uniqueNameをTrusted Typesポリシー名として使用します。
空でない文字列に設定すると、その値がポリシー名として使用されます。
オブジェクトに設定すると、ポリシー名はオブジェクトのpolicyNameプロパティから取得されます。

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    trustedTypes: {
      policyName: 'my-application#webpack',
    },
  },
};

output.trustedTypes.onPolicyCreationFailure

string = 'stop': 'continue' | 'stop'

5.82.0+

require-trusted-types-for 'script'が適用されていないことを想定してロードを続行するか、ポリシー名がCSPtrusted-typesリストにないか、重複しているためにtrustedTypes.createPolicy(...)の呼び出しが失敗したときにすぐに失敗するかを決定します。

module.exports = {
  //...
  output: {
    //...
    trustedTypes: {
      policyName: 'my-application#webpack',
      onPolicyCreationFailure: 'continue',
    },
  },
};

output.umdNamedDefine

boolean

libraryTarget: "umd"を使用する場合、output.umdNamedDefineをtrueに設定すると、UMDビルドのAMDモジュールに名前が付けられます。それ以外の場合は、匿名のdefineが使用されます。

module.exports = {
  //...
  output: {
    umdNamedDefine: true,
  },
};

output.uniqueName

string

グローバル変数を使用するときに複数のwebpackランタイムが競合するのを避けるためのwebpackビルドの一意の名前。デフォルトでは、output.libraryの名前、またはコンテキスト内のpackage.jsonのパッケージ名になります。どちらも見つからない場合は、''に設定されます。

output.uniqueNameは、次のための一意のグローバル変数を生成するために使用されます。

output.chunkLoadingGlobal

webpack.config.js

module.exports = {
  // ...
  output: {
    uniqueName: 'my-package-xyz',
  },
};

output.wasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

WebAssemblyモジュールのロード方法を設定するオプション。デフォルトで含まれるメソッドは、'fetch'（web/WebWorker）、'async-node'（Node.js）ですが、プラグインによって他のメソッドが追加される場合があります。

デフォルト値は、異なるtargetの影響を受ける可能性があります。

targetが'web'、'webworker'、'electron-renderer'、または'node-webkit'に設定されている場合、デフォルトは'fetch'です。
targetが'node'、'async-node'、'electron-main'、または'electron-preload'に設定されている場合、デフォルトは'async-node'です。

module.exports = {
  //...
  output: {
    wasmLoading: 'fetch',
  },
};

output.webassemblyModuleFilename

string = '[hash].module.wasm'

WebAssemblyモジュールのファイル名を指定します。output.pathディレクトリ内の相対パスとして指定する必要があります。

module.exports = {
  //...
  output: {
    webassemblyModuleFilename: '[id].[hash].wasm',
  },
};

output.workerChunkLoading

string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal' boolean: false

新しいオプションworkerChunkLoadingは、ワーカーのチャンクロードを制御します。

webpack.config.js

module.exports = {
  //...
  output: {
    workerChunkLoading: false,
  },
};

output.workerPublicPath

string

ワーカーのパブリックパスを設定します。デフォルトはoutput.publicPathの値です。ワーカーのスクリプトが他のスクリプトとは異なるパスにある場合にのみ、このオプションを使用してください。

webpack.config.js

module.exports = {
  //...
  output: {
    workerPublicPath: '/workerPublicPath2/',
  },
};

output.workerWasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

ワーカーでのWebAssemblyモジュールのロード方法を設定するオプション。デフォルトはoutput.wasmLoadingの値です。

webpack.config.js

module.exports = {
  //...
  output: {
    workerWasmLoading: 'fetch',
  },
};

このページを編集·このページを印刷

« 前へ

モード

モジュール

出力

output.assetModuleFilename

output.asyncChunks

output.auxiliaryComment

output.charset

output.chunkFilename

output.chunkFormat

output.chunkLoadTimeout

output.chunkLoadingGlobal

output.chunkLoading

output.clean

output.compareBeforeEmit

output.crossOriginLoading

output.cssChunkFilename

output.cssFilename

output.cssHeadDataCompression

output.devtoolFallbackModuleFilenameTemplate

output.devtoolModuleFilenameTemplate

output.devtoolNamespace

output.enabledChunkLoadingTypes

output.enabledLibraryTypes

output.enabledWasmLoadingTypes

output.environment

output.filename

テンプレート文字列

一部のコンテキストでは、プロパティは生の値の代わりにJavaScriptコード式を使用します。このような場合、WithLengthバリアントが利用可能であり、元の値をスライスする代わりにこれを使用する必要があります。

例

webpack v5.65.0+の場合、experiments.futureDefaultsが有効になっている場合、hashDigestLengthオプションのデフォルト値として16が使用されます。

webpack v5.54.0+以降、hashFunctionはより高速なアルゴリズムとしてxxhash64をサポートしており、experiments.futureDefaultsが有効になっている場合は、デフォルトとして使用されます。

Node.JSのhash.updateを介してハッシュを更新するためのオプションのソルト。

通常、output.hotUpdateChunkFilenameを変更する必要はありません。

詳細については、output.chunkLoadingGlobalを参照してください。

通常、output.hotUpdateMainFilenameを変更する必要はありません。

エミットされたコードの周りにIIFEラッパーを追加するようにwebpackに指示します。

本番環境でブラウザコンソールからの警告を非表示にします。このオプションは、ターミナル/コンソール出力には影響しません。

ネイティブのimport()関数の名前。dynamic-import-polyfillなどを使用してポリフィルに使用できます。

ネイティブのimport.metaオブジェクトの名前（ポリフィルと交換可能）。

エントリポイントごとにライブラリオプションを構成する場合、上記の構成は期待どおりに機能しないことに注意してください。それぞれのエントリの下でこれを行う方法を次に示します

output.library.name

output.library.type

変数を公開する

型: 'var'

型: 'assign'

型: 'assign-properties'

オブジェクト割り当てによる公開

型: 'this'

型: 'window'

型: 'global'

型: 'commonjs'

モジュール定義システム

型: 'module'

型: 'commonjs2'

型: 'commonjs-static'

型: 'amd'

型: 'amd-require'

型: 'umd'

型: 'system'

その他の型

型: 'jsonp'

output.library.export

output.library.auxiliaryComment

output.library.umdNamedDefine

output.libraryExport

output.libraryTarget

変数の公開

libraryTarget: 'var'

libraryTarget: 'assign'

libraryTarget: 'assign-properties'

オブジェクト代入による公開

libraryTarget: 'this'

libraryTarget: 'window'

libraryTarget: 'global'

libraryTarget: 'commonjs'

モジュール定義システム

libraryTarget: 'module'

libraryTarget: 'commonjs2'

libraryTarget: 'amd'

libraryTarget: 'amd-require'

libraryTarget: 'umd'

libraryTarget: 'system'

一部のコンテキストでは、プロパティは生の値の代わりにJavaScriptコード式を使用します。このような場合、`WithLength`バリアントが利用可能であり、元の値をスライスする代わりにこれを使用する必要があります。

`webpack v5.65.0+`の場合、`experiments.futureDefaults`が有効になっている場合、`hashDigestLength`オプションのデフォルト値として`16`が使用されます。

`webpack v5.54.0+`以降、`hashFunction`はより高速なアルゴリズムとして`xxhash64`をサポートしており、`experiments.futureDefaults`が有効になっている場合は、デフォルトとして使用されます。

Node.JSの`hash.update`を介してハッシュを更新するためのオプションのソルト。

通常、`output.hotUpdateChunkFilename`を変更する必要はありません。

詳細については、`output.chunkLoadingGlobal`を参照してください。

通常、`output.hotUpdateMainFilename`を変更する必要はありません。

ネイティブの`import()`関数の名前。`dynamic-import-polyfill`などを使用してポリフィルに使用できます。

ネイティブの`import.meta`オブジェクトの名前（ポリフィルと交換可能）。