為什么要配置externals
- 官網(wǎng)解釋：
webpack 中的 externals 配置提供了不從 bundle 中引用依賴的方式顶籽。解決的是，所創(chuàng)建的 bundle 依賴于那些存在于用戶環(huán)境(consumer environment)中的依賴亭螟。
怎么理解呢医清，意思是如果需要引用一個(gè)庫，但是又不想讓webpack打包（減少打包的時(shí)間）谒臼，并且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進(jìn)行使用（一般都以import方式引用使用）耀里，那就可以通過配置externals蜈缤。
這樣做的目的就是將不怎么需要更新的第三方庫脫離webpack打包，不被打入bundle中冯挎，從而減少打包時(shí)間底哥，但又不影響運(yùn)用第三方庫的方式，例如import方式等房官。
externals支持模塊上下文的方式
global - 外部 library 能夠作為全局變量使用趾徽。用戶可以通過在 script 標(biāo)簽中引入來實(shí)現(xiàn)。這是 externals 的默認(rèn)設(shè)置翰守。
commonjs - 用戶(consumer)應(yīng)用程序可能使用 CommonJS 模塊系統(tǒng)孵奶，因此外部 library 應(yīng)該使用 CommonJS 模塊系統(tǒng)，并且應(yīng)該是一個(gè) CommonJS 模塊蜡峰。
commonjs2 - 類似上面幾行了袁，但導(dǎo)出的是 module.exports.default。
amd - 類似上面幾行事示，但使用 AMD 模塊系統(tǒng)早像。
怎么運(yùn)用externals
例如：
在index.html中引入CDN的資源react全家桶之類的資源
<script src="https://lib.baomitu.com/react/16.4.0-alpha.7926752/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/cjs/react-dom-server.browser.development.js
"></script>
webpack.config.js配置如下：
module.exports = {
...
output: {
...
},
externals : {
react: 'react',
redux: 'redux'
}
...
}
這樣的話在應(yīng)用程序中依舊可以以import的方式（還支持其他方式）引用：
import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
這樣不僅之前對第三方庫的用法方式不變僻肖，還把第三方庫剝離出webpack的打包中肖爵，從而加速webpack的打包速度。
externals和libraryTarget的關(guān)系
libraryTarget配置如何暴露 library臀脏。如果不設(shè)置library,那這個(gè)library就不暴露劝堪。就相當(dāng)于一個(gè)自執(zhí)行函數(shù)
externals是決定的是以哪種模式去加載所引入的額外的包
libraryTarget決定了你的library運(yùn)行在哪個(gè)環(huán)境冀自，哪個(gè)環(huán)境也就決定了你哪種模式去加載所引入的額外的包。也就是說秒啦，externals應(yīng)該和libraryTarget保持一致熬粗。library運(yùn)行在瀏覽器中的，你設(shè)置externals的模式為commonjs余境，那代碼肯定就運(yùn)行不了了驻呐。
如果是應(yīng)用程序開發(fā)，一般是運(yùn)行在瀏覽器環(huán)境libraryTarget可以不設(shè)置芳来，externals默認(rèn)的模式是global含末，也就是以全局變量的模式加載所引入外部的庫。
