使用webpack中的externals配置项如何配置

作者：System 时间：2024年08月17日分类：所有,jquery 字数：679

这篇文章距离上次修改已过444天，其中的内容可能已经有所变动。

在webpack中，externals配置项用于告诉webpack哪些模块不通过webpack打包，而是通过在应用程序的HTML文件中直接引入的方式来加载。这通常用于引入一些库，比如jQuery、React或者Angular等，因为这些库通常是通过script标签在全局范围内提供的。

下面是一个简单的externals配置示例：




// webpack.config.js
module.exports = {
  // ...
  externals: {
    react: 'React',
    lodash: '_'
  },
  // ...
};

在这个配置中，react和lodash是外部依赖，它们在全局范围内通过它们的名字（这里是'React'和'_'）可用。在你的代码中，你不需要使用import或require来引入这些库，而是可以直接使用它们。

确保在你的HTML文件中，你需要通过script标签来引入这些库：




<!-- index.html -->
<script src="path/to/react.js"></script>
<script src="path/to/lodash.js"></script>

这样，当webpack构建你的应用代码时，它会忽略这些库，不会将它们包含在最终的bundle中。这样可以帮助减少最终bundle的大小，并且通常提升构建速度。