深刻淺出webpack學習(3)--Output

Output

output配置如何輸出最終想要的代碼，output是一個object裏面包含一系列配置。

1. filename

output.filename配置輸出文件的名稱，爲string類型，若是隻有一個輸出文件，咱們能夠將它寫爲靜態不變的：

filename: 'bundel.js'

如今有多個chunk要輸出時，就須要藉助模板和變量了，前面說到webpack會爲每一個chunk取一個名稱，能夠根據chunk名稱來區分輸出的文件名：

filename: '[name].js'

代碼裏的[name]表明用內置的name變量去替換[name]，這時你能夠把它看作一個字符串模板函數，每一個要輸出的chunk都會經過這個函數去拼接出輸出的文件名稱。

內置變量還有以下：

1. id, chunk的惟一標識，從0開始。
2. name, chunk的名稱。
3. hash, chunk的惟一標識的hash值。
4. chunkhash, chunk內容的hash值。

其中hash和chunkhash的長度能夠指定的，[hash:8]這樣去指定，默認是20位。

2. chunkFilename

output.chunkFilename, 配置無入口的chunk在輸出時的文件名稱。chunkFilename和filename很是相似，可是chunkFilename只用於指定在運行過程當中生成的chunk在輸出的時的文件名稱。常見的會在運行時生成chunk場景只有在使用CommonChunkPlugin，使用import('path/to/module')動態加載等時，chunkFilename支持和filename一致的內置變量。

3. path

output.path配置輸出文件存放在本地的目錄，必須是string類型的絕對路徑

path: path.resolve(__dirname, 'dist_[hash]')

4. publicPath

在項目中可能會有一些構建出的資源須要異步加載，加載這些異步資源須要對應的URL地址。
output.publicPath配置發佈到線上資源的URL前綴，爲string類型，默認值是空字符串，即便用相對路徑。
output.path和output.publicPath都支持字符串模板，內置變量只有一個：hash表明編譯一次的hash值。

5. crossOrginLoading

webpack輸出的部門代碼可能須要異步加載，而異步加載時經過jsonp方式實現。jsonp的原理是動態的向HTML中插入一個script標籤去異步加載資源。

output.crossOriginLoading則是用於配置這個異步插入標籤的crossorigin值。

script標籤的crossorigin屬性能夠取如下值：

1. anonymous(默認)在加載此腳本資源時不會帶上用戶的cookie；
2. use-credentials 在加載此腳本資源時會帶上用戶的cookies；

一般設置crossorigin來獲取異步加載的腳本執行時的詳細錯誤信息。

6. libraryTarge和library

當webpack去構建一個能夠被其餘模塊導入使用的庫時須要用到他們。

1. output.libraryTarget 配置以何種方式導出庫。
2. output.library 配置導出庫的名稱。

它們一般搭配在一塊兒使用。

output.libraryTarget是字符串的枚舉類型，支持如下配置:

• 1. var(默認)

編寫的庫將經過var被賦值給經過library指定名稱的變量。
假如配置了output.library='LibraryName', 則輸出和使用的代碼以下：

//webpack輸出代碼
var LibraryName = lib_code

//使用庫的方法
LibraryName.doSomething()

假如output.library爲空，則將直接輸出：

lib_code //lib_code代指導出庫的代碼內容，是有返回值的一個自執行函數。

• 1. commonjs

編寫庫將經過commonjs規範導出。
假如配置了output.library='LibraryName', 則輸出和使用代碼以下：

//webpack輸出的代碼
exports['LibraryName'] = lib_code

//使用庫的方法
require('library-name-in-npm')['libraryName'].doSomething()

• 1. commonjs2

編寫的庫將經過 commonjs2規範導出，輸出和使用代碼以下：

//webpack輸出的代碼
module.exports = lib_code

//使用庫的方法
require('library-name-in-npm').doSomething()

• 1. this

編寫的庫將經過this被賦值給經過library指定的名稱：

//webpack 輸出的代碼
this['LibraryName'] = lib_code

//使用庫的方法
this.libraryName.doSomething()

• 1. window

編寫的庫將經過window被賦值給library指定的名稱

//webpack輸出的代碼
window['LibraryName'] = lib_code

//使用庫的方法
window.libraryName.doSomething()

• 1. global

編寫的庫將經過global被賦值給經過library指定的名稱

//webpack輸出的代碼
global['LibraryName'] = lib_code

//使用庫的方法
global.libraryName.doSomething()

6. libraryExport

output.libraryExport配置要導出的模塊中哪些子模塊須要被導出，它只有在output.libraryTarget被設置爲commonjs或者commonjs2時使用纔有意義。
假如要導出的模塊源碼是：

export const a = 1
export default b = 2

如今你想讓構建輸出的代碼只導出其中的a， 能夠把output.libraryExport設置成a, 那麼構建輸出的代碼和使用方法將變成以下：

module.exports = lib_code['a']

require('library-name-in-npm') === 1