Output
output 配置如何輸出最終想要的代碼。 output 是一個 object ，里面包含一系列配置項，下面分別介紹它們。
filename
output.filename 配置輸出文件的名稱，為string 類型。 如果只有一個輸出文件，則可以把它寫成靜態不變的：
filename: 'bundle.js'
但是在有多個 Chunk 要輸出時，就需要借助模版和變量了。前面說到 Webpack 會為每個 Chunk取一個名稱，可以根據 Chunk 的名稱來區分輸出的文件名：
filename: '[name].js'
代碼里的 [name] 代表用內置的 name 變量去替換 [name] ，這時你可以把它看作一個字符串模塊函數， 每個要輸出的 Chunk 都會通過這個函數去拼接出輸出的文件名稱。
內置變量除了 name 還包括：
| 變量名 | 含義 |
|---|---|
| id | Chunk 的唯一標識，從0開始 |
| name | Chunk 的名稱 |
| hash | Chunk 的唯一標識的 Hash 值 |
| chunkhash | Chunk 內容的 Hash 值 |
其中 hash 和 chunkhash 的長度是可指定的， [hash:8] 代表取8位 Hash 值，默認是20位。
注意 ExtractTextWebpackPlugin 插件是使用 contenthash 來代表哈希值而不是 chunkhash， 原因在於 ExtractTextWebpackPlugin 提取出來的內容是代碼內容本身而不是由一組模塊組成的 Chunk。
chunkFilename
output.chunkFilename 配置無入口的 Chunk 在輸出時的文件名稱。 chunkFilename 和上面的 filename 非常類似，但 chunkFilename 只用於指定在運行過程中生成的 Chunk 在輸出時的文件名稱。 常見的會在運行時生成 Chunk 場景有在使用 CommonChunkPlugin、使用 import('path/to/module') 動態加載等時。 chunkFilename 支持和 filename 一致的內置變量。
path
output.path 配置輸出文件存放在本地的目錄，必須是 string 類型的絕對路徑。通常通過 Node.js 的 path 模塊去獲取絕對路徑：
path: path.resolve(__dirname, 'dist_[hash]')
publicPath
在復雜的項目里可能會有一些構建出的資源需要異步加載，加載這些異步資源需要對應的 URL 地址。
output.publicPath 配置發布到線上資源的 URL 前綴，為string 類型。 默認值是空字符串 ''，即使用相對路徑。
這樣說可能有點抽象，舉個例子，需要把構建出的資源文件上傳到 CDN 服務上，以利於加快頁面的打開速度。配置代碼如下：
filename:'[name]_[chunkhash:8].js'
publicPath: 'https://cdn.example.com/assets/'
這時發布到線上的 HTML 在引入 JavaScript 文件時就需要：
<script src='https://cdn.example.com/assets/a_12345678.js'></script>
使用該配置項時要小心，稍有不慎將導致資源加載404錯誤。
output.path 和 output.publicPath 都支持字符串模版，內置變量只有一個：hash 代表一次編譯操作的 Hash 值。
crossOriginLoading
Webpack 輸出的部分代碼塊可能需要異步加載，而異步加載是通過 JSONP 方式實現的。 JSONP 的原理是動態地向 HTML 中插入一個 <script src="url"></script> 標簽去加載異步資源。output.crossOriginLoading 則是用於配置這個異步插入的標簽的 crossorigin 值。
script 標簽的 crossorigin 屬性可以取以下值：
anonymous(默認) 在加載此腳本資源時不會帶上用戶的 Cookies；use-credentials在加載此腳本資源時會帶上用戶的 Cookies。
通常用設置 crossorigin 來獲取異步加載的腳本執行時的詳細錯誤信息。
libraryTarget 和 library
當用 Webpack 去構建一個可以被其他模塊導入使用的庫時需要用到它們。
output.libraryTarget配置以何種方式導出庫。output.library配置導出庫的名稱。
它們通常搭配在一起使用。
output.libraryTarget 是字符串的枚舉類型，支持以下配置。
var (默認)
編寫的庫將通過 var 被賦值給通過 library 指定名稱的變量。
假如配置了 output.library='LibraryName'，則輸出和使用的代碼如下：
// Webpack 輸出的代碼 var LibraryName = lib_code; // 使用庫的方法 LibraryName.doSomething();
假如 output.library 為空，則將直接輸出：
lib_code其中lib_code代指導出庫的代碼內容，是有返回值的一個自執行函數。
commonjs
編寫的庫將通過 CommonJS 規范導出。
假如配置了 output.library='LibraryName'，則輸出和使用的代碼如下：
// Webpack 輸出的代碼 exports['LibraryName'] = lib_code; // 使用庫的方法 require('library-name-in-npm')['LibraryName'].doSomething();
其中 library-name-in-npm 是指模塊發布到 Npm 代碼倉庫時的名稱。
commonjs2
編寫的庫將通過 CommonJS2 規范導出，輸出和使用的代碼如下：
// Webpack 輸出的代碼 module.exports = lib_code; // 使用庫的方法 require('library-name-in-npm').doSomething();
exports 導出，而 CommonJS2 在 CommonJS 的基礎上增加了 module.exports 的導出方式。 在 output.libraryTarget 為 commonjs2 時，配置 output.library 將沒有意義。
this
編寫的庫將通過 this 被賦值給通過 library 指定的名稱，輸出和使用的代碼如下：
// Webpack 輸出的代碼 this['LibraryName'] = lib_code; // 使用庫的方法 this.LibraryName.doSomething();
window
編寫的庫將通過 window 被賦值給通過 library 指定的名稱，即把庫掛載到 window 上，輸出和使用的代碼如下：
// Webpack 輸出的代碼 window['LibraryName'] = lib_code; // 使用庫的方法 window.LibraryName.doSomething();
global
編寫的庫將通過 global 被賦值給通過 library 指定的名稱，即把庫掛載到 global 上，輸出和使用的代碼如下：
// Webpack 輸出的代碼 global['LibraryName'] = lib_code; // 使用庫的方法 global.LibraryName.doSomething();
libraryExport
output.libraryExport 配置要導出的模塊中哪些子模塊需要被導出。 它只有在 output.libraryTarget 被設置成 commonjs 或者 commonjs2 時使用才有意義。
假如要導出的模塊源代碼是：
export const a=1; export default b=2;
現在你想讓構建輸出的代碼只導出其中的 a，可以把 output.libraryExport 設置成 a，那么構建輸出的代碼和使用方法將變成如下：
// Webpack 輸出的代碼 module.exports = lib_code['a']; // 使用庫的方法 require('library-name-in-npm')===1;
output 里常用的配置項，還有部分幾乎用不上的配置項沒有一一列舉，你可以在 Webpack 官方文檔 上查閱它們。