3. Output

原文地址：https://webpack.js.org/concepts/output/
翻译：xiyoki

Output

影响编译输出的选项。output选项告诉webpack怎样将编译后的文件写入磁盘。注意，虽然可以有多个入口点，但只有一个输出配置被指定。
如果使用任意hashing（[hash]或[chunkhash]），请确保有一个一致的modules ordering（模块排序规则）。使用OccurrenceOrderPlugin或recordsPath。

Usage

在你的webpack配置中，output属性的最低要求是设置它的值为一个对象包括以下两点：

你喜欢的编译后的文件的filename：// main.js || bundle.js || index.js。
output.path是一个绝对路径，是一次打包过程中，你希望把编译后的文件打包进的那个目录。

//webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

Options

以下是可以传递给output属性的值列表。

output.chunkFilename

non-entry chunks的filename，是output.path目录中的一个相对路径。

[id] 被替换为chunk的id。
[name] 被替换为chunk的name (或id，当chunk没有name时)。
[hash] 被替换为compilation（编译）的hash。
[chunkhash] 被替换为chunk的hash 。

output.crossOriginLoading

支持跨域（cross-origin）加载chunk的选项。
可能的值有：

false - 不能跨域加载。
"anonymous" - 能跨域加载。使用anonymous（匿名）时，无credentials（凭证）随请求一同被发送。
"use-credentials" - 能跨域加载。credentials（凭证）会随请求一同被发送。

查看 MDN获取更多跨域加载的信息。

Default: false
see also [library](https://webpack.js.org/guides/author-libraries/)
see also [Development Tools](https://webpack.js.org/guides/development/#choosing-a-tool)

output.devtoolLineToLine

为所有/指定模块启用line-to-line映射模式。line-to-line映射模式，使用一个简单的sourcemap，generated source（生成源）的每一行被映射到original source（原始源）的同一行。这是一个性能优化。当需要性能更好时才使用它，并且你能肯定输入线（input line）与生成线（generated lines）相匹配。

true 为所有模块启用它 (不推荐）

与module.loaders等价的对象{test, include, exclude}会为特定的文件启用它。

Default: false

output.filename

指定磁盘上每个输出文件的名称。您不能在此指定绝对路径！output.path选项指定文件被写入到磁盘上的位置。文件名仅用于命名单个文件。
single entry

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/bundle.js

multiple entries
如果你的配置创建了多个“chunk”（例如有多个入口点或当使用像commonschunkplugin这样的插件时），你应该使用substitutions（替换），以确保每个文件都有一个唯一的名称。

[name] 被chunk的name替换。
[hash] 被compilation（编译）的hash替换。
[chunkhash] 被chunk的hash替换。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
}

// writes to disk: ./build/app.js, ./build/search.js

output.hotUpdateChunkFilename

Hot Update Chunks（热更新模块）的filename。它们在output.path目录中。

[id] 被chunk的id替换。
[hash] 被compilation（编译）的hash替换。 (存储在记录中的最后一个hash)
Default: "[id].[hash].hot-update.js"

output.hotUpdateFunction

webpack使用的用于Hot Update Chunks异步加载的JSONP函数。

Default: "webpackHotUpdate"

output.hotUpdateMainFilename

Hot Update Main File的文件名。它在output.path目录中。

[hash] 被compilation（编译）的hash替换。 (存储在记录中的最后一个hash)
Default: "[hash].hot-update.json"

output.jsonpFunction

webpack使用的用于异步加载chunk的JSONP函数。
较短的函数可能会减少文件大小。当单页上有多个WebPACK实例时，使用不同的标识符。

Default: "webpackJsonp"

output.library

如果设置，导出的bundle为library。output.library是其名字。
如果您正在编写一个library（库），并希望将其发布为单个文件，请这样使用。

output.libraryTarget

导出library的格式：

"var" - 通过设置变量导出: var Library = xxx (default)
"this" - 通过设置this属性导出: this["Library"] = xxx
"commonjs" - 通过设置exports属性导出: exports["Library"] = xxx
"commonjs2" - 通过设置module.exports导出: module.exports = xxx
"amd" - 导出到AMD (随意命名 - 通过library选项设置名称)
"umd" - 导出到AMD, CommonJS2 或成为根下面属性。
Default: "var"

如果没有设置output.library , 但output.libraryTarget设置成了除var以外的值, 导出对象的每个属性要被复制 (除了amd, commonjs2和umd)。

output.path

输出目录，一个绝对路径（必须的）

[hash] 被compilation的hash替换。

config.js

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

index.html

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

为assets（资源）使用CDN和hashes的更复杂的例子：