為什么要配置externals
- 官網解釋：
webpack 中的 externals 配置提供了不從 bundle 中引用依賴的方式。解決的是，所創建的 bundle 依賴於那些存在於用戶環境(consumer environment)中的依賴。
怎么理解呢，意思是如果需要引用一個庫，但是又不想讓webpack打包（減少打包的時間），並且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進行使用（一般都以import方式引用使用），那就可以通過配置externals。
這樣做的目的就是將不怎么需要更新的第三方庫脫離webpack打包，不被打入bundle中，從而減少打包時間，但又不影響運用第三方庫的方式，例如import方式等。
externals支持模塊上下文的方式
-
global - 外部 library 能夠作為全局變量使用。用戶可以通過在 script 標簽中引入來實現。這是 externals 的默認設置。
-
commonjs - 用戶(consumer)應用程序可能使用 CommonJS 模塊系統，因此外部 library 應該使用 CommonJS 模塊系統，並且應該是一個 CommonJS 模塊。
-
commonjs2 - 類似上面幾行，但導出的是 module.exports.default。
-
amd - 類似上面幾行，但使用 AMD 模塊系統。
怎么運用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' } ... } 這樣的話在應用程序中依舊可以以import的方式（還支持其他方式）引用：
import React from 'react'; import { createStore, combineReducers, applyMiddleware } from 'redux'; 這樣不僅之前對第三方庫的用法方式不變，還把第三方庫剝離出webpack的打包中，從而加速webpack的打包速度。
externals和libraryTarget的關系
-
libraryTarget配置如何暴露 library。如果不設置library,那這個library就不暴露。就相當於一個自執行函數
-
externals是決定的是以哪種模式去加載所引入的額外的包
-
libraryTarget決定了你的library運行在哪個環境，哪個環境也就決定了你哪種模式去加載所引入的額外的包。也就是說，externals應該和libraryTarget保持一致。library運行在瀏覽器中的，你設置externals的模式為commonjs，那代碼肯定就運行不了了。
-
如果是應用程序開發，一般是運行在瀏覽器環境libraryTarget可以不設置，externals默認的模式是global，也就是以全局變量的模式加載所引入外部的庫。
作者：magicwager
鏈接：https://www.jianshu.com/p/283b17d17b3c
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。