2024年1月12日发(作者：)
深入浅出webpack之externals的使用
Webpack是一个强大的模块打包工具，允许我们将前端资源进行模块化管理和打包。然而，在一些情况下，我们可能需要将一些外部引入的库或者依赖排除在Webpack打包范围之外，这时就需要使用Webpack提供的externals功能。
Externals是Webpack提供的一个配置项，用于将一些库或者依赖排除在打包范围之外。通过externals配置，我们可以将这些库或者依赖从输出的bundle文件中排除，从而在生产环境中使用CDN或全局变量来引入这些库。这样做的好处是可以减小bundle文件的体积，加快加载速度，并且减少发布版本时对这些库的版本管理。
使用externals配置非常简单，在webpack配置文件中，我们只需要在配置项externals中定义一个或多个库的映射即可。这里的映射可以是一个字符串，表示全局变量名；也可以是一个对象，包含库的名称和对应的全局变量名；还可以是一个函数，用于自定义处理库的引入。
下面通过一个示例来说明externals的使用。假设我们的项目中引入了第三方库jQuery，并且这个库是通过CDN来加载的，我们想让Webpack在打包时不将这个库包含在bundle文件中。我们可以这样配置externals：
```javascript
//
s =
//...其他配置项
externals:
jquery: 'jQuery',
},
};
```
在上面的例子中，我们将库的名称`jquery`映射为全局变量`jQuery`。这样在打包时，Webpack就会排除这个库的引入，并在生成的bundle文件中创建一个对全局变量`jQuery`的引用。
```javascript
s =
//...其他配置项
externals:
react:
amd: 'react',
root: 'React',
},
'react-dom':
amd: 'react-dom',
root: 'ReactDOM',
},
},
};
```
除了对象形式，externals也支持一个函数用于自定义处理库的引入。这个函数接收三个参数：request（引入的库的名称），previousRequest（引入库的上一个引用，如果没有则为空字符串），callback（用于处理引入库的回调函数）。
下面是一个使用自定义externals处理函数的例子：
```javascript
s =
//...其他配置项
externals: function(context, request, callback)
if (/^jquery$/.test(request))
return callback(null, 'jQuery');
}
callback(;
},
};
```
在上面的例子中，我们使用了正则表达式来判断是否需要排除`jquery`库，并将其映射为`jQuery`全局变量。
总结一下，externals是Webpack提供的一个配置项，用于将一些库或者依赖排除在打包范围之外。通过配置externals，我们可以将这些库从输出的bundle文件中移除，从而减小文件体积，加快加载速度，并且简化对这些库的版本管理。我们可以通过字符串、对象或者函数的形式来配置externals，并且根据具体需求来选择合适的方式来使用。
发布者：admin，转转请注明出处：http://www.yc00.com/news/1705061171a1389843.html
评论列表（0条）