企业应用程序的数据网格和图表
webpack
很荣幸与 webpack 合作

输出

顶层的 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

告诉 webpack 在 HTML <script> 标签中添加 charset="utf-8"。

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' | <any string>

代码块的格式（默认包含的格式为 '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

false string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | <any string>

加载代码块的方法（默认包含的方法为 '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.path 值结合起来，以确定磁盘上的位置。

output.cssHeadDataCompression

5.91.0+

boolean

此选项确定是否压缩 CSS 文件头部标签中生成的元数据。此选项在 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

字符串

此选项确定模块在使用 output.devtoolModuleFilenameTemplate 时使用的命名空间。当未指定时，它将默认为 output.uniqueName 的值。它用于在加载使用 webpack 构建的多个库时，防止源代码映射中源文件路径冲突。

例如，如果您有两个库，命名空间分别为 `library1` 和 `library2`，它们都有一个文件 `./src/index.js`（可能内容不同），它们将公开这些文件为 `webpack://library1/./src/index.js` 和 `webpack://library2/./src/index.js`。

output.enabledChunkLoadingTypes

[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>]

入口点启用的块加载类型列表。将由 webpack 自动填充。仅在使用函数作为入口选项并从那里返回 chunkLoading 选项时才需要。

webpack.config.js

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

output.enabledLibraryTypes

[字符串]

入口点启用的库类型列表。

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

output.enabledWasmLoadingTypes

[字符串]

入口点启用的 wasm 加载类型列表。

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

output.environment

告诉 webpack 在生成的运行时代码中可以使用哪些 ES 功能。

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';
    },
  },
};

确保阅读 缓存指南 以获取详细信息。除了设置此选项之外，还需要更多步骤。

注意此选项称为 filename，但您仍然可以使用类似 'js/[name]/bundle.js' 的内容来创建文件夹结构。

注意此选项不会影响按需加载块的输出文件。它只影响最初加载的输出文件。对于按需加载的块文件，使用 output.chunkFilename 选项。加载器创建的文件也不受影响。在这种情况下，您需要尝试特定加载器提供的选项。

模板字符串

以下替换在模板字符串中可用（通过 webpack 的内部 TemplatedPathPlugin）

在编译级别可用的替换

模板描述
[fullhash]编译的完整哈希值
[hash]相同，但已弃用

在块级别可用的替换

模板描述
[id]块的 ID
[name]块的名称（如果设置），否则为块的 ID
[chunkhash]块的哈希值，包括块的所有元素
[contenthash]块的哈希值，仅包括此内容类型的元素（受 optimization.realContentHash 影响）

在模块级别可用的替换

模板描述
[id]模块的 ID
[moduleid]相同，但已弃用
[hash]模块的哈希值
[modulehash]相同，但已弃用
[contenthash]模块内容的哈希值

在文件级别可用的替换

模板描述
[file]文件名和路径，不包含查询或片段
[query]以 ? 开头的查询
[fragment]以 # 开头的片段
[base]仅文件名（包括扩展名），不包含路径
[filebase]相同，但已弃用
[path]仅路径，不包含文件名
[name]仅文件名，不包含扩展名或路径
[ext]以 . 开头的扩展名（不适用于 output.filename)

在 URL 级别可用的替换

模板描述
[url]URL

哈希的长度（[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;
};

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

要使用的哈希摘要的前缀长度。

output.hashFunction

string = 'md4' function

要使用的哈希算法。支持 Node.JS 的 crypto.createHash 中的所有函数。从 4.0.0-alpha2 开始，hashFunction 现在可以是自定义哈希函数的构造函数。出于性能原因，您可以提供非加密哈希函数。

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

确保哈希函数具有可用的 update 和 digest 方法。

output.hashSalt

一个可选的盐，用于通过 Node.JS 的 hash.update 更新哈希。

output.hotUpdateChunkFilename

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

自定义热更新块的文件名。有关可能值的详细信息，请参见 output.filename 选项。

这里唯一允许的占位符是 [id] 和 [fullhash]，默认值为

webpack.config.js

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

output.hotUpdateGlobal

字符串

仅在 target 设置为 'web' 时使用，它使用 JSONP 加载热更新。

JSONP 函数用于异步加载热更新块。

有关详细信息，请参阅 output.chunkLoadingGlobal。

output.importMetaName

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

自定义主要热更新文件名。[fullhash] 和 [runtime] 可用作占位符。

output.iife

boolean = true

告诉 webpack 在发出的代码周围添加 IIFE 包装器。

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

output.ignoreBrowserWarnings

5.81.0+

boolean = false

隐藏生产环境中浏览器控制台的警告。此选项不会影响终端/控制台输出。

webpack.config.js

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

output.importFunctionName

string = 'import'

本机 import() 函数的名称。可用于填充，例如使用 dynamic-import-polyfill。

webpack.config.js

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

output.importMetaName

字符串

本机 import.meta 对象的名称（可以交换为填充）。

webpack.config.js

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

output.library

输出一个库，公开您的入口点的导出。

  • 类型：string | string[] | object

让我们看一个例子。

webpack.config.js

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

假设您在 src/index.js 入口文件中导出了一个函数

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

现在变量 MyLibrary 将绑定到您的入口文件的导出，以下是如何使用 webpack 打包的库

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

在上面的示例中，我们将单个入口文件传递给 entry，但是，webpack 可以接受 多种类型的入口点，例如 array 或 object。

  1. 如果您提供一个 array 作为 entry 点，则只有数组中的最后一个将被公开。

    module.exports = {
  // …
  entry: ['./src/a.js', './src/b.js'], // only exports in b.js will be exposed
  output: {
    library: 'MyLibrary',
  },
};

  2. 如果提供了一个object作为entry点，则可以使用library的array语法公开所有条目。

    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('webpack');
  MyLibrary.b.hello('webpack');
</script>

    有关更多信息，请参阅此示例。

    请注意，如果您要为每个入口点配置库选项，则上述配置将无法按预期工作。以下是如何在每个条目下进行操作。

    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',
      },
    },
  },
};

output.library.amdContainer

5.78.0+

使用一个容器（在全局空间中定义）来调用 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

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提供的名称，在捆绑包包含的任何范围内。

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'
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 定义的名称下的特定对象。

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

入口点的返回值 将被分配给 this，其属性名称由 output.library.name 指定。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();

如果我们指定 output.library.name 且 type: commmonjs2，入口点的返回值将被分配给 module.exports.[output.library.name]。

type: '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]
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>标签加载此捆绑包，它将无法按预期工作，或者根本无法工作（在杏仁加载器的情况下）。它只能通过一个兼容 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' 类型一样，这取决于适当的 require 函数 在加载 webpack 输出的环境中可用。

使用这种类型，库名称不能使用。

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: {
    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',
    },
  },
};
type: 'system'

这将您的库暴露为 System.register 模块。此功能首次在 webpack 4.30.0 中发布。

系统模块要求在执行 webpack 捆绑包时浏览器中存在全局变量 System。编译为 System.register 格式允许您 System.import('/bundle.js') 而不进行额外配置，并将您的 webpack 捆绑包加载到系统模块注册表中。

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

输出

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

通过在配置中添加 output.library.name 以及将 output.library.type 设置为 system，输出捆绑包将使用库名称作为 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，这将导出整个（命名空间）对象。以下示例演示了在使用 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'

入口点的返回值将分配给this，使用output.library指定的属性名。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 一起使用，有关更多详细信息，请 阅读此问题。

libraryTarget: 'amd'

这将把您的库公开为 AMD 模块。

AMD 模块要求入口块（例如，由 <script> 标签加载的第一个脚本）用特定属性定义，例如 define 和 require，这些属性通常由 RequireJS 或任何兼容的加载器（如 almond）提供。否则，直接加载生成的 AMD 包会导致错误，例如 define is not defined。

使用以下配置...

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_;
});

如果直接使用<script>标签加载此捆绑包，它将无法按预期工作，或者根本无法工作（在杏仁加载器的情况下）。它只能通过一个兼容 RequireJS 的异步模块加载器通过该文件的实际路径来工作，因此在这种情况下，如果这些路径在服务器上直接公开，output.path 和 output.filename 对于这种特定设置可能变得很重要。

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 中发布。

系统模块要求在执行 webpack 捆绑包时浏览器中存在全局变量 System。编译为 System.register 格式允许您 System.import('/bundle.js') 而不进行额外配置，并将您的 webpack 捆绑包加载到系统模块注册表中。

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 () {
      // ...
    },
  };
});

您可以通过 __system_context__ 访问 SystemJS 上下文

// 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

boolean = false

将输出 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 mode 中默认为 false。'verbose' 显示更多信息，例如导出、运行时要求和中止。

webpack.config.js

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

output.publicPath

  • 类型

    • 函数

    • 字符串

      output.publicPath 默认值为 'auto'，适用于 web 和 web-worker 目标，有关其用例，请参见 本指南。

当使用按需加载或加载外部资源（如图像、文件等）时，这是一个重要的选项。如果指定了不正确的值，您将在加载这些资源时收到 404 错误。

此选项指定在浏览器中引用时输出目录的公共 URL。相对于 HTML 页面（或 <base> 标签）解析相对 URL。服务器相对 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 获取提示，使用它来确定从哪里提供输出文件。

请注意，此参数中的 [fullhash] 将被编译的哈希值替换。有关详细信息，请参见 缓存指南。

示例

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 模块规范处理模块加载中的错误，但会影响性能。

  • 类型：boolean
  • 可用：5.25.0+
module.exports = {
  //...
  output: {
    strictModuleErrorHandling: true,
  },
};

output.strictModuleExceptionHandling

boolean = false

告诉 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 内容安全策略指令下运行时使用。

默认情况下禁用（没有兼容性，脚本 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' 未被强制执行，或者在调用 trustedTypes.createPolicy(...) 失败时立即失败，原因是策略名称在 CSP trusted-types 列表中不存在或重复。

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

字符串

webpack 构建的唯一名称，用于避免在使用全局变量时多个 webpack 运行时发生冲突。它默认为 output.library 名称或来自 package.json 的包名称（如果两者都未找到，则设置为 ''）。

output.uniqueName 将用于生成以下内容的唯一全局变量：

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

字符串

为 Worker 设置公共路径，默认为 output.publicPath 的值。仅当您的 Worker 脚本位于与其他脚本不同的路径中时才使用此选项。

webpack.config.js

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

output.workerWasmLoading

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

设置在 Worker 中加载 WebAssembly 模块的方法的选项，默认为 output.wasmLoading 的值。

webpack.config.js

module.exports = {
  //...
  output: {
    workerWasmLoading: 'fetch',
  },
};
编辑此页面·打印此页面
« 上一页
模式
下一页 »
模块

29 位贡献者

sokraskipjacktomasAlabesmattceirthfvgsdhurlburtusaMagicDuckfadysamirsadekbyzykmadhavarshneyharshwardhansingheemeliEugeneHlushkog-planesmelukovNeob91anikethsahajamesgeorge007hiroppychenxsansnitin315QC-LanshumanvmrzalyaulJakobJingleheimerlong76ahabhgktanyabouman