在 Webpack 中，`externals` 是一個配置選項，用于指定哪些模塊應該被視為外部依賴，而不會被打包到最終的輸出文件中。 當你希望引入的庫已經通過其他方式（如 CDN）加載，并且你不希望將其打包進你的構建文件時，可以使用 `externals`，以減小構建文件的體積并加快加載速度。 在配置文件中，你可以將 `externals` 屬性設置為一個對象，其中鍵表示要排除的模塊名，值表示如何在運行時訪問這些模塊的方式。常見的值類型有以下幾種： - 字符串：表示該模塊通過全局變量進行訪問。例如，`'lodash'` 表示你在運行時通過全局變量 `lodash` 來訪問這個模塊。 - 對象：使用鍵值對的形式，表示以何種方式訪問模塊。鍵是模塊名，值是在運行時訪問這個模塊的方式。例如，`{ 'react': 'React', 'react-dom': 'ReactDOM' }` 表示你在運行時通過全局變量 `React` 和 `ReactDOM` 來訪問這兩個模塊。 下面是一個示例配置，展示了如何使用 `externals`： ```javascript module.exports = { // ... externals: { jquery: 'jQuery', lodash: '_', }, }; ``` 上述配置將告訴 Webpack 將 `jquery` 和 `lodash` 視為外部依賴，并在構建過程中不會將它們打包進最終的輸出文件中。相反，它們將通過全局變量 `jQuery` 和 `_` 進行訪問。 使用 `externals` 可以幫助減小構建文件的體積，提高應用程序的加載速度，同時也適用于一些特殊的場景，如使用第三方庫或將模塊作為外部插件使用等。