出力#

最上位の `output` キーには、バンドル、アセット、その他 Rspack でバンドルまたはロードするものをどのように、どこに配置するかを指示する一連のオプションが含まれています。

• 型: Object

output.assetModuleFilename#

• 型: string | ((pathData: PathData, assetInfo?: JsAssetInfo) => string)
• デフォルト: '[hash][ext][query]'

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

[name]、[file]、[query]、[fragment]、[base]、および [path] は、data URI 置換から構築されたアセットに対して空文字列に設定されます。

アセットモジュールによって出力されるファイル名。この値は、Rule.generator.filename で上書きできます。

output.asyncChunks#

• 型: boolean
• デフォルト: true

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

output.charset#

• 型: boolean
• デフォルト: true

HTML の <script> タグに charset="utf-8" を追加します。

output.chunkFilename#

• 型: string = '[id].js' | (pathData: PathData, assetInfo?: JsAssetInfo) => string
• デフォルト: 関数でない場合、output.filename によって決定されます。関数の場合、'[id].js'。

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

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

デフォルトでは、[id].js が使用されるか、output.filename から推測された値（[name] は [id] に置き換えられるか、または [id]. がプレフィックスとして追加される）が使用されます。

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

関数としての使用

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

output.chunkFormat#

• 型: false | 'array-push' | 'commonjs' | 'module' | string
• デフォルト: target と output.module によって決定されます。

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

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

output.chunkLoadTimeout#

• 型: number
• デフォルト: 120000

チャンクのリクエストがタイムアウトするまでのミリ秒数。

module.exports = {
  //...
  output: {
    //...
    chunkLoadTimeout: 30000, // 30 seconds before chunk request timed out.
  },
};

output.chunkLoadingGlobal#

• 型: string
• デフォルト: output.uniqueNameによって決定されます。

グローバル変数は、Rspack がチャンクの読み込みに使用する変数です。

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

output.chunkLoading#

• 型: false | 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import'

チャンクを読み込む方法（デフォルトで含まれる方法は'jsonp'（web）、'import'（ESM）、'importScripts'（webworker）、'require'（同期 node.js）、'async-node'（非同期 node.js）ですが、プラグインによって他の方法が追加される可能性があります）。デフォルト値は、targetとchunkFormatの設定に基づいて決定されます。

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

output.clean#

• 型: boolean
• デフォルト: false

出力ディレクトリ内のすべてのファイルを削除してから、出力物を生成します。

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

output.compareBeforeEmit#

• 型: boolean
• デフォルト: true

出力ファイルシステムに書き込む前に、既に存在するファイルが同じ内容を持っているかどうかをRspackに確認させます。

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

output.crossOriginLoading#

• 型: false | 'anonymous' | 'use-credentials'
• デフォルト: false

crossOriginLoading設定を使用すると、動的に読み込まれたチャンクのcrossorigin 属性を設定できます。

targetが'web'の場合、Rspackは非同期JavaScriptとCSSリソースを読み込むために、動的に<script>タグと<link>タグを作成します。これらのリソースのURLが他のドメインにあり、crossOriginLoadingがfalseでない場合、Rspackは<script>タグと<link>タグにcrossorigin属性を追加します。

オプション値

crossOriginLoadingには、次のオプション値があります。

• false: crossorigin 属性を設定しません。
• 'anonymous': ユーザー認証情報なしでクロスオリジンを有効にするために、crossoriginを'anonymous'に設定します。
• 'use-credentials': ユーザー認証情報を使用してクロスオリジンを有効にするために、crossoriginを'use-credentials'に設定します。

例

例えば、output.publicPathをhttps://example.com/に、output.crossOriginLoadingを'anonymous'に設定します。

const path = require('path');

module.exports = {
  output: {
    publicPath: 'https://example.com/',
    crossOriginLoading: 'anonymous',
  },
};

RspackがJavaScriptリソースを動的に読み込む場合、次のHTMLを生成します。

<script src="https://example.com/foo.js" crossorigin="anonymous"></script>

output.cssChunkFilename#

• 型: string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
• デフォルト: 関数でない場合、output.chunkFilenameによって決定されます。それ以外の場合は'[id].css'。

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

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

output.cssFilename#

• 型: string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
• デフォルト: output.filenameによって決定されます。

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

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

output.devtoolFallbackModuleFilenameTemplate#

• 型: string | function (info)
• デフォルト: undefined

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

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

output.devtoolModuleFilenameTemplate#

• 型: string = 'webpack://[namespace]/[resource-path]?[loaders]' | function (info) => string
• デフォルト: undefined

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

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

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

テンプレート文字列では、次の置換を使用できます。

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

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

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

output.devtoolNamespace#

• 型: string
• デフォルト: undefined

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

たとえば、名前空間がlibrary1とlibrary2で、どちらも./src/index.jsファイル（内容は異なる可能性があります）を持つ2つのライブラリがある場合、これらのファイルはwebpack://library1/./src/index.jsとwebpack://library2/./src/index.jsとして公開されます。

output.enabledChunkLoadingTypes#

• 型: ('jsonp' | 'import-scripts' | 'require' | 'async-node' | string)[]
• デフォルト: output.chunkLoading、output.workerChunkLoading、およびエントリのchunkLoading設定によって決定されます。

エントリポイントで使用可能なチャンク読み込みタイプのリスト。Rspackによって自動的に設定されます。エントリオプションとして関数を使用し、そこからchunkLoadingオプションを返す場合にのみ必要です。

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

output.enabledLibraryTypes#

• 型: string[]
• デフォルト: output.libraryとエントリによって決定されます。

エントリポイントで使用可能なライブラリタイプのリスト。

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

output.enabledWasmLoadingTypes#

• 型: ('fetch-streaming' | 'fetch' | 'async-node' | string | false)[]
• デフォルト: output.wasmLoadingとoutput.workerWasmLoadingによって決定されます。

エントリポイントで使用可能なWasm読み込みタイプのリスト。

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

output.environment#

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

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 'document' variable.
      document: 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,
      // Determines if the node: prefix is generated for core module imports in environments that support it.
      // This is only applicable to Webpack runtime code.
      nodePrefixForCoreModules: false,
      // The environment supports optional chaining ('obj?.a' or 'obj?.()').
      optionalChaining: true,
      // The environment supports template literals.
      templateLiteral: true,
    },
  },
};

output.filename#

• 型: string | (pathData: PathData, assetInfo?: JsAssetInfo) => string
• デフォルト: [output.module](#outputmodule)がtrueの場合、'[name].mjs'、それ以外の場合は'[name].js'。

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

単一のentryポイントの場合、これは静的な名前になります。

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

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

Entry名を使用する

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

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

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

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

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

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

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

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

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

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

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

テンプレート文字列#

以下のテンプレート文字列を使用して、対応するファイル名を置き換えることができます。異なるコンテキストは異なる置換可能なコンテンツに対応します。例：output.assetModuleFilenameはファイルコンテキストとモジュールコンテキストの使用をサポートしています。

コンパイルコンテキスト#

コンパイルレベルで置き換え可能なコンテンツ。

チャンクコンテキスト#

チャンクレベルで置き換え可能なコンテンツ。

モジュールコンテキスト#

モジュールレベルで置き換え可能なコンテンツ。

ファイルコンテキスト#

ファイルレベルで置き換え可能なコンテンツ。

URLレベルで使用可能な置換

ハッシュの長さ（[hash]、[contenthash]、または[chunkhash]）は、[hash:12]を使用して指定できます（デフォルトは16）。または、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;
};

output.globalObject#

• 型: string
• デフォルト： 'self'

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

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

例として

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

output.hashDigest#

• 型: string
• デフォルト： 'hex'

ハッシュを生成する際に使用するエンコーディング。ファイル名に'base64'を使用することは、そのアルファベットに/文字が含まれているため問題になる可能性があります。同様に、'latin1'には任意の文字が含まれる可能性があります。

output.hashDigestLength#

• 型: number
• デフォルト： 16

使用するハッシュダイジェストのプレフィックスの長さ。

output.hashFunction#

• 型： 'md4' | 'xxhash64'
• デフォルト： 'xxhash64'

使用するハッシュアルゴリズム。

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

output.hashSalt#

• 型: string
• デフォルト: undefined

ハッシュを更新するためのオプションのソルト。

output.hotUpdateChunkFilename#

• 型: string
• デフォルト： "[id].[fullhash].hot-update.js"

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

ここで許可されるプレースホルダーは[id]と[fullhash]のみで、デフォルトは

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

output.hotUpdateGlobal#

• 型: string
• デフォルト： "webpackHotUpdate" + output.uniqueName

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

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

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

output.hotUpdateMainFilename#

• 型: string
• デフォルト： "[runtime].[fullhash].hot-update.json"

メインホットアップデートファイル名をカスタマイズします。[fullhash]と[runtime]をプレースホルダーとして使用できます。

output.iife#

• 型: boolean
• デフォルト: true

Rspackに、出力されたコードの周りにIIFEラッパーを追加するように指示します。

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

output.importFunctionName#

• 型: string
• デフォルト： 'import'

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

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

output.importMetaName#

• 型: string
• デフォルト： 'import.meta'

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

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

output.library#

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

• 型： string | string[] | object

例を見てみましょう。

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

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

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

これで、変数MyLibraryはエントリファイルのエクスポートにバインドされ、Rspackバンドルされたライブラリの使用方法を示します。

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

上記の例では、単一のエントリファイルをentryに渡していますが、Rspackは様々な種類のエントリポイント（例：配列またはオブジェクト）を受け入れることができます。

1. entryポイントとして配列を提供した場合、配列の最後にあるものだけが公開されます。

   module.exports = {
     // …
     entry: ['./src/a.js', './src/b.js'], // 只有在 b.js 中导出的内容才会被暴露
     output: {
       library: 'MyLibrary',
     },
   };

2. entryポイントとしてオブジェクトを提供した場合、libraryの配列構文を使用して、すべてのエントリを公開できます。

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

   a.jsとb.jsの両方が関数helloをエクスポートすると仮定して、ライブラリの使用方法を示します。

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

output.library.amdContainer#

• 型: string

AMDモジュールでdefine/require関数を呼び出すためのコンテナ（グローバル空間に定義）を使用します。

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#

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

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

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

output.library.type#

ライブラリの公開方法を構成します。

• 型: string

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

以降の例では、エントリポイントによって返される値を示すために_entry_return_を使用します。

変数の公開#

これらのオプションは、エントリポイントの戻り値（つまり、エントリポイントがエクスポートした内容）を、バンドルが組み込まれたスコープでoutput.library.nameによって指定された名前に割り当てます。

type: 'var'#

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

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

var MyLibrary = _entry_return_;

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

type: 'assign'#

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

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

MyLibrary = _entry_return_;

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

type: 'assign-properties'#

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で定義された名前の下の特定のオブジェクトに割り当てます。

type: '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

type: 'window'#

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

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

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

type: 'global'#

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

エントリポイントの戻り値は、output.library.nameの値を使用してグローバルオブジェクトに割り当てられます。targetの値に応じて、グローバルオブジェクトはself、global、globalThisなどに変わることがあります。

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

type: '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オプションでは異なる意味を持ちます。

type: 'module'#

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

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

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

type: '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]に割り当てられます。

type: 'commonjs-static'#

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]

type: 'amd'#

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

AMDモジュールでは、エントリチャンク（つまり、<script>タグによってロードされた最初のスクリプト）を、defineやrequireなどの特定のプロパティで定義する必要があります。これは通常、RequireJSまたは互換性のあるローダー（almondなど）によって提供されます。それ以外の場合は、生成された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がこの特定の設定で重要になる可能性があります。

type: 'amd-require'#

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

これにより、すぐに実行されるAMD require(dependencies, factory)ラッパーを使用して出力がパッケージ化されます。

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

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

type: '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: {
    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];
  }
})(global, function () {
  return _entry_return_;
});

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

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

type: 'system'#

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

Systemモジュールでは、Rspackバンドルが実行されるときにブラウザにグローバル変数Systemが存在する必要があります。System.register形式にコンパイルすると、追加の設定なしでSystem.import('/bundle.js')を実行でき、Rspackバンドルが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 () {
        // ...
      },
    };
  },
);

その他の型#

type: 'jsonp'

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

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

MyLibrary(_entry_return_);

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

output.library.export#

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

• 型: string | string[]
• デフォルト: undefined

デフォルトではundefinedであり、全体の（名前空間）オブジェクトをエクスポートします。以下の例は、output.library.type: 'var'を使用する場合のこの設定の効果を示しています。

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

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

// If your library 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 }
• デフォルト: undefined

各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
• デフォルト: undefined

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.module#

• 型: boolean
• デフォルト: false

JavaScriptファイルをモジュール型として出力します。実験的な機能であるため、デフォルトでは無効になっています。使用するには、experiments.outputModuleをtrueに設定する必要があります。

有効にした場合、Rspack は内部的に output.iife を false、output.scriptType を 'module'、terserOptions.module を true に設定します。

他者が利用するライブラリをコンパイルするために Rspack を使用している場合、output.module が true のときは、output.libraryTarget を 'module' に設定してください。

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

output.path#

• 型: string
• デフォルト: path.resolve(process.cwd(), 'dist')

出力ディレクトリ（絶対パス）。

const path = require('path');

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

このパラメータ内の [fullhash] は、コンパイルのハッシュに置き換えられます。

output.pathinfo#

• 型: boolean | 'verbose'
• デフォルト: true

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

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

output.publicPath#

• 型: 'auto' | string | ((pathData: PathData, assetInfo?: JsAssetInfo) => string)
• デフォルト: targets が 'web' または 'webworker' の場合 'auto'。それ以外の場合は undefined

このオプションは、画像やファイルなどの参照リソースのURL接頭辞を決定します。

例えば、設定ファイルがあるとします。

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

非初期チャンクファイルの場合、リクエストURLは次のようになります。/assets/1.chunk.js。

画像への参照の場合、リクエストURLは次のようになります。/assets/logo.png。

また、CDNを使用して製品を展開する場合にも役立ちます。

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/assets/',
    assetModuleFilename: '[name][ext]',
  },
};

すべての資産リソースについて、それらのリクエストURLは次のようになります。https://cdn.example.com/assets/logo.png。

動的にpublicPathを設定する

ランタイムコードで__webpack_public_path__を使用してpublicPathを動的に設定できます。__webpack_public_path__はRspackの設定内のpublicPathを上書きしますが、動的にロードされたリソースにのみ有効になります。

まず、publicPath.jsを作成します。

__webpack_public_path__ = 'https://cdn.example.com/assets/';

次に、エントリファイルの最初の行にインポートします。

import './publicPath.js';
import './others.js';

output.scriptType#

• 型: '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.strictModuleErrorHandling#

• 型: boolean
• デフォルト: false

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

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

output.strictModuleExceptionHandling#

• 型: boolean

例外がスローされた場合にモジュールをモジュールインスタンスキャッシュ(require.cache)から削除するようRspackに指示します。

output.trustedTypes#

• 型: true | string | object
• デフォルト: undefined

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

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

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

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

output.uniqueName#

• 型: string
• デフォルト: output.library 名、またはコンテキスト内の package.json からのパッケージ名にデフォルトで設定されます。どちらも見つからない場合、'' に設定されます。

グローバルを使用する場合、複数のRspackランタイムが競合しないようにするためのRspackビルドの一意の名前。

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

• output.chunkLoadingGlobal

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

output.wasmLoading#

• 型: false | 'fetch', 'async-node'
• デフォルト: 'fetch'

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#

• 型: false | 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import'
• デフォルト: false

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

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

output.workerPublicPath#

• 型: string
• デフォルト: ""