Output
output 配置如何輸出最終想要的代碼午磁。 output 是一個 object ，里面包含一系列配置項浸赫，下面分別介紹它們绘沉。
filename
output.filename 配置輸出文件的名稱，為string 類型岂昭。 如果只有一個輸出文件，則可以把它寫成靜態(tài)不變的：
filename: 'bundle.js'
但是在有多個 Chunk 要輸出時狠怨，就需要借助模版和變量了约啊。前面說到 Webpack 會為每個 Chunk取一個名稱，可以根據(jù) Chunk 的名稱來區(qū)分輸出的文件名：
filename: '[name].js'
代碼里的 [name] 代表用內(nèi)置的 name 變量去替換 [name] 佣赖，這時你可以把它看作一個字符串模塊函數(shù)恰矩， 每個要輸出的 Chunk 都會通過這個函數(shù)去拼接出輸出的文件名稱。
內(nèi)置變量除了 name 還包括：
| 變量名 | 含義 |
|---|---|
| id | Chunk 的唯一標識憎蛤，從0開始 |
| name | Chunk 的名稱 |
| hash | Chunk 的唯一標識的 Hash 值 |
| chunkhash | Chunk 內(nèi)容的 Hash 值 |
其中 hash 和 chunkhash 的長度是可指定的外傅， [hash:8] 代表取8位 Hash 值，默認是20位俩檬。
注意 ExtractTextWebpackPlugin 插件是使用 contenthash 來代表哈希值而不是 chunkhash萎胰， 原因在于 ExtractTextWebpackPlugin 提取出來的內(nèi)容是代碼內(nèi)容本身而不是由一組模塊組成的 Chunk。
chunkFilename
output.chunkFilename 配置無入口的 Chunk 在輸出時的文件名稱棚辽。 chunkFilename 和上面的 filename 非常類似技竟，但 chunkFilename 只用于指定在運行過程中生成的 Chunk 在輸出時的文件名稱。 常見的會在運行時生成 Chunk 場景有在使用 CommonChunkPlugin屈藐、使用 import('path/to/module') 動態(tài)加載等時榔组。 chunkFilename 支持和 filename 一致的內(nèi)置變量。
path
output.path 配置輸出文件存放在本地的目錄联逻，必須是 string 類型的絕對路徑搓扯。通常通過 Node.js 的 path 模塊去獲取絕對路徑：
path: path.resolve(__dirname, 'dist_[hash]')
publicPath
在復雜的項目里可能會有一些構(gòu)建出的資源需要異步加載，加載這些異步資源需要對應的 URL 地址包归。
output.publicPath 配置發(fā)布到線上資源的 URL 前綴锨推，為string 類型。 默認值是空字符串 ''箫踩，即使用相對路徑爱态。
這樣說可能有點抽象，舉個例子境钟，需要把構(gòu)建出的資源文件上傳到 CDN 服務上锦担，以利于加快頁面的打開速度。配置代碼如下：
filename:'[name]_[chunkhash:8].js'
publicPath: 'https://cdn.example.com/assets/'
這時發(fā)布到線上的 HTML 在引入 JavaScript 文件時就需要：
<script src='https://cdn.example.com/assets/a_12345678.js'></script>
使用該配置項時要小心慨削，稍有不慎將導致資源加載404錯誤洞渔。
output.path 和 output.publicPath 都支持字符串模版套媚，內(nèi)置變量只有一個：hash 代表一次編譯操作的 Hash 值。
crossOriginLoading
Webpack 輸出的部分代碼塊可能需要異步加載磁椒，而異步加載是通過 JSONP 方式實現(xiàn)的堤瘤。 JSONP 的原理是動態(tài)地向 HTML 中插入一個 <script src="url"></script> 標簽去加載異步資源。output.crossOriginLoading 則是用于配置這個異步插入的標簽的 crossorigin 值浆熔。
script 標簽的 crossorigin 屬性可以取以下值：
-
anonymous(默認) 在加載此腳本資源時不會帶上用戶的 Cookies本辐； -
use-credentials在加載此腳本資源時會帶上用戶的 Cookies。
通常用設置 crossorigin 來獲取異步加載的腳本執(zhí)行時的詳細錯誤信息医增。
libraryTarget 和 library
當用 Webpack 去構(gòu)建一個可以被其他模塊導入使用的庫時需要用到它們慎皱。
-
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 規(guī)范導出今膊。
假如配置了 output.library='LibraryName'，則輸出和使用的代碼如下：
[[圖片上傳失敗...(image-178b83-1653530114060)]](javascript:void(0); "復制代碼")
// Webpack 輸出的代碼
exports['LibraryName'] = lib_code;
// 使用庫的方法
require('library-name-in-npm')['LibraryName'].doSomething();
其中 library-name-in-npm 是指模塊發(fā)布到 Npm 代碼倉庫時的名稱。
commonjs2
編寫的庫將通過 CommonJS2 規(guī)范導出，輸出和使用的代碼如下：
// Webpack 輸出的代碼
module.exports = lib_code;
// 使用庫的方法
require('library-name-in-npm').doSomething();
exports
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;
現(xiàn)在你想讓構(gòu)建輸出的代碼只導出其中的 a，可以把 output.libraryExport 設置成 a镣陕，那么構(gòu)建輸出的代碼和使用方法將變成如下：
// Webpack 輸出的代碼
module.exports = lib_code['a'];
// 使用庫的方法
require('library-name-in-npm')===1;
