WebPack Output 输出

发布时间：2023-05-09 13:21:14 所属栏目：教程来源：

导读：output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

output.auxiliaryComment
string object

在

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

output.auxiliaryComment
string object

在和 output.library 和 output.libraryTarget 一起使用时，此选项允许用户向导出容器(export wrapper)中插入注释。要为 libraryTarget 每种类型都插入相同的注释，将 auxiliaryComment 设置为一个字符串：

output: {
library: "someLibName",
libraryTarget: "umd",
filename: "someLibName.js",
auxiliaryComment: "Test Comment"
}
将会生成如下：

(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 每种类型的注释进行更细粒度地控制，请传入一个对象：

auxiliaryComment: {
root: "Root Comment",
commonjs: "Commonjs Comment",
commonjs2: "Commonjs2 Comment",
amd: "AMD Comment"
}
output.chunkFilename
string function

此选项决定了非入口(non-entry) chunk 文件的名称。有关可取的值的详细信息，请查看 output.filename 选项。

注意，这些文件名需要在 runtime 根据 chunk 发送的请求去生成。因此，需要在 webpack runtime 输出 bundle 值时，将 chunk id 的值对应映射到占位符(如 [name] 和 [chunkhash])。这会增加文件大小，并且在任何 chunk 的占位符值修改后，都会使 bundle 失效。

默认使用 [id].js 或从 output.filename 中推断出的值（[name] 会被预先替换为 [id] 或 [id].）。

output.chunkLoadTimeout
integer

chunk 请求到期之前的毫秒数，默认为 120 000。从 webpack 2.6.0 开始支持此选项。

output.crossOriginLoading
boolean string

只用于 target 是 web，使用了通过 script 标签的 JSONP 来按需加载 chunk。

启用 cross-origin 属性加载 chunk。以下是可接收的值……

crossOriginLoading: false - 禁用跨域加载（默认）

crossOriginLoading: "anonymous" - 不带凭据(credential)启用跨域加载

crossOriginLoading: "use-credentials" - 带凭据(credential)启用跨域加载 with credentials

output.jsonpScriptType
string

允许自定义 script 的类型，webpack 会将 script 标签注入到 DOM 中以下载异步 chunk。可以使用以下选项：

"text/javascript"（默认）

"module"：与 ES6 就绪代码一起使用。

output.devtoolFallbackmodulefilenameTemplate
string | function(info)

当上面的模板字符串或函数产生重复时使用的备用内容。

查看 output.devtoolmodulefilenameTemplate。

output.devtoolLinetoLine
boolean | object

避免使用此选项，因为它们已废弃，并将很快删除。 it is deprecated and will soon be removed.

对所有或某些模块启用「行到行映射(line to line mapping)」。这将生成基本的源映射(source map)，即生成资源(generated source)的每一行，映射到原始资源(original source)的同一行。这是一个性能优化点，并且应该只需要输入行(input line)和生成行(generated line)相匹配时才使用。

传入 boolean 值，对所有模块启用或禁用此功能（默认 false）。对象可有 test, include, exclude 三种属性。例如，对某个特定目录中所有 javascript 文件启用此功能：

devtoolLinetoLine: { test: /\.js$/, include: 'src/utilities' }
output.devtoolmodulefilenameTemplate
string | function(info)

此选项仅在「devtool 使用了需要模块名称的选项」时使用。

自定义每个 source map 的 sources 数组中使用的名称。可以通过传递模板字符串(template string)或者函数来完成。例如，当使用 devtool: 'eval'，默认值是：

devtoolmodulefilenameTemplate: "webpack://[namespace]/[resource-path]?[loaders]"
模板字符串(template string)中做以下替换（通过 webpack 内部的 ModuleFilenameHelpers）：

模板   描述
[absolute-resource-path]   绝对路径文件名
[all-loaders]   自动和显式的 loader，并且参数取决于第一个 loader 名称
[hash]   模块标识符的 hash
[id]   模块标识符
[loaders]   显式的 loader，并且参数取决于第一个 loader 名称
[resource]   用于解析文件的路径和用于第一个 loader 的任意查询参数
[resource-path]   不带任何查询参数，用于解析文件的路径
[namespace]   模块命名空间。在构建成为一个 library 之后，通常也是 library 名称，否则为空
当使用一个函数，同样的选项要通过 info 参数并使用驼峰式(camel-cased)：

devtoolmodulefilenameTemplate: info => {
return `webpack:///${info.resourcePath}?${info.loaders}`
}
如果多个模块产生相同的名称，使用 output.devtoolFallbackmodulefilenameTemplate 来代替这些模块。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!