Webpack 的 externals 配置：為何需要以及如何使用

引言

Webpack 是一個強大的模塊打包工具，它能夠將 JavaScript 模塊及其依賴項打包成一個或多個 bundle 文件，以便在瀏覽器或其他環境中運行。然而，在某些情況下，我們并不希望 Webpack 將所有依賴項都打包到最終的 bundle 中。這時，就需要用到 externals 配置選項。本文將深入探討 externals 配置的必要性、工作原理以及最佳實踐，幫助讀者理解其在優化 Webpack 構建過程中的重要作用。

為什么需要 externals 配置？

externals 配置允許我們告訴 Webpack，某些模塊不需要被打包，而是應該從外部加載。這在以下幾種情況下尤其重要：

1. 處理第三方庫：許多項目依賴于大型的第三方庫，例如 React、jQuery 或 Lodash。這些庫通常已經經過了高度優化，并且可能已經包含了多個版本。將這些庫打包到我們的項目中，會顯著增加 bundle 的體積，導致加載速度變慢，影響用戶體驗。externals 配置允許我們從一個 CDN 或全局變量中加載這些庫，從而避免重復打包，減小 bundle 的大小。

2. 共享庫：在大型項目中，多個模塊可能共享相同的依賴項。如果 Webpack 將這些依賴項重復打包到每個模塊中，會導致資源浪費。externals 配置可以確保這些依賴項只被加載一次，從而提高效率。

3. 與其他構建系統集成：在復雜的項目中，我們可能需要使用多個構建系統來處理不同的代碼。例如，一個項目可能使用 Webpack 來打包前端代碼，而使用另一個構建系統來打包后端代碼。如果后端代碼也依賴于某些 JavaScript 庫，我們可以使用 externals 配置來告訴 Webpack 不要打包這些庫，而是依賴后端構建系統提供的庫版本。

4. 減少構建時間：大型項目的構建過程可能非常耗時。通過使用 externals 配置來排除大型第三方庫，可以顯著減少構建時間，提高開發效率。

5. 避免版本沖突：不同模塊可能依賴于不同版本的同一個庫。如果 Webpack 將所有依賴項都打包到一個 bundle 中，可能會出現版本沖突。使用 externals 配置可以避免這種情況，確保每個模塊使用其所需的庫版本。

externals 配置的工作原理

externals 配置接受一個對象或數組作為值。對象鍵為模塊名稱（例如，'react'），值為此模塊在全局環境中的名稱（例如，'React'）。Webpack 會在打包過程中，將這些模塊標記為外部依賴，并不會將其包含在最終的 bundle 中。當瀏覽器加載 bundle 時，它會查找這些外部依賴的全局變量，并使用它們。

例如，以下配置將 React 和 React-DOM 作為外部依賴:

module.exports = { entry: './src/index.js', output: { filename: 'bundle.js' }, externals: { 'react': 'React', 'react-dom': 'ReactDOM' } };

這段配置告訴 Webpack，不要將 'react' 和 'react-dom' 模塊打包到 bundle 中，而是假設它們已經通過 `