為什么要配置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，也就是以全局變量的模式加載所引入外部的庫。