深入理解webpackexternals

RUERI • 2025-04-23 00:48 • 编程

一、什么是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时，需要考虑到底部署的环境和具体的业务需求，进行灵活的配置和选项设置。

原创文章，作者：RUERI，如若转载，请注明出处：https://www.506064.com/n/370867.html