深入理解webpackexternals

一、什麼是webpackexternals

webpack是前端開發中最受歡迎的打包工具之一，它能夠將多個模塊打包成一個文件，以便於在瀏覽器中載入。webpackexternals提供了一種使打包文件變得更小、更快的方法，即不將某些庫或依賴打進最終的打包文件中，而是將其作為外部資源引入。

外部資源可以是CDN上的文件或通過script標籤在HTML中引入的文件。通過將這些外部依賴作為webpackexternals配置中的選項，webpack會在打包時跳過這些依賴，以減小打包文件的大小。

// webpack.config.js
module.exports = {
  //...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

二、為什麼要使用webpackexternals

使用webpackexternals的最主要的原因，就是能夠減小打包文件的體積，使得頁面載入速度更快，用戶體驗更好。

此外，使用CDN引入庫文件，還能夠利用瀏覽器緩存，減少請求次數，更加提高了頁面的載入速度。

另外，使用webpackexternals還可以避免將重複的代碼打進打包文件中，使打包文件更加精簡。

三、如何使用webpackexternals

在webpack中配置externals選項，可以通過一個對象鍵值對的方式將庫名稱和其在全局變數中的名稱作為鍵值對進行設置。除此之外，也可以使用一個函數，該函數接收兩個參數：request 和 callback。request 是對該依賴項的引用，callback 是向webpack提供該庫在全局變數中的名稱，使得webpack知道如何正確地將此庫與打包文件分離。

// webpack.config.js
module.exports = {
  //...
  externals: {
    lodash: {
      // lodash通過script標籤載入
      root: '_',
      // 使用AMD方式載入
      amd: 'lodash',
      // 使用CommonJS方式載入
      commonjs: 'lodash'
    }
  }
};

// webpack.config.js
module.exports = {
  //...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    // 使用一個函數計算完整的庫名稱
    moment: function (context, request, callback) {
      if (/moment/.test(request)){
        return callback(null, 'moment');
      }
      callback();
    }
  }
};

四、常見問題

1、如何讓webpackexternals不影響測試環境？

由於webpackexternals將部分庫文件排除在打包範圍之外，這樣在某些情況下可能會影響單元測試的運行，可以使用webpack-node-externals來排除node_modules目錄下的所有依賴項。

// webpack.config.test.js
const nodeExternals = require('webpack-node-externals');

module.exports = {
  // ...
  externals: [nodeExternals()]
};

2、如何將多個庫打成一個文件？

在webpackexternals中可以使用多個選項，來指定多個庫文件在打包時引入的方式。這樣可以將多個庫文件分別打包成不同的文件，也可以將其打包成一個文件，同時也可以控制這些庫文件的引入順序等一系列問題。

// webpack.config.js
module.exports = {
  //...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          name: 'vendor',
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          enforce: true
        }
      }
    }
  }
};

五、總結

webpackexternals是webpack中非常重要的一部分，通過合理使用webpackexternals，能夠讓我們的項目更加高效、靈活，並提高頁面的載入速度。在使用webpackexternals時，需要考慮到底部署的環境和具體的業務需求，進行靈活的配置和選項設置。