3. Output

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

Output

影響編譯輸出的選項哼丈。output選項告訴webpack怎樣將編譯后的文件寫入磁盤千绪。注意，雖然可以有多個入口點碍拆，但只有一個輸出配置被指定。
如果使用任意hashing（[hash]或[chunkhash]）俄周，請確保有一個一致的modules ordering（模塊排序規(guī)則）沪铭。使用OccurrenceOrderPlugin或recordsPath。

Usage

在你的webpack配置中硅瞧，output屬性的最低要求是設(shè)置它的值為一個對象包括以下兩點：

你喜歡的編譯后的文件的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（憑證）隨請求一同被發(fā)送。
"use-credentials" - 能跨域加載碉钠。credentials（憑證）會隨請求一同被發(fā)送纲缓。

查看 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（原始源）的同一行污筷。這是一個性能優(yōu)化工闺。當需要性能更好時才使用它，并且你能肯定輸入線（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
如果你的配置創(chuàng)建了多個“chunk”（例如有多個入口點或當使用像commonschunkplugin這樣的插件時）诈皿，你應(yīng)該使用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函數(shù)胸嘁。

Default: "webpackHotUpdate"

output.hotUpdateMainFilename

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

[hash] 被compilation（編譯）的hash替換性宏。 (存儲在記錄中的最后一個hash)
Default: "[hash].hot-update.json"

output.jsonpFunction

webpack使用的用于異步加載chunk的JSONP函數(shù)。
較短的函數(shù)可能會減少文件大小状飞。當單頁上有多個WebPACK實例時毫胜，使用不同的標識符书斜。

Default: "webpackJsonp"

output.library

如果設(shè)置，導(dǎo)出的bundle為library酵使。output.library是其名字荐吉。
如果您正在編寫一個library（庫），并希望將其發(fā)布為單個文件口渔，請這樣使用样屠。

output.libraryTarget

導(dǎo)出library的格式：

"var" - 通過設(shè)置變量導(dǎo)出: var Library = xxx (default)
"this" - 通過設(shè)置this屬性導(dǎo)出: this["Library"] = xxx
"commonjs" - 通過設(shè)置exports屬性導(dǎo)出: exports["Library"] = xxx
"commonjs2" - 通過設(shè)置module.exports導(dǎo)出: module.exports = xxx
"amd" - 導(dǎo)出到AMD (隨意命名 - 通過library選項設(shè)置名稱)
"umd" - 導(dǎo)出到AMD, CommonJS2 或成為根下面屬性。
Default: "var"

如果沒有設(shè)置output.library , 但output.libraryTarget設(shè)置成了除var以外的值, 導(dǎo)出對象的每個屬性要被復(fù)制 (除了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的更復(fù)雜的例子：