externals 配置
时间: 2023-07-04 22:11:47 浏览: 47
externals 配置是在 webpack 中常用的一种配置选项,用于将某些依赖声明为外部依赖,而不是打包进最终的输出文件中。这样可以避免将一些较大的依赖打包进输出文件,从而减小输出文件的体积,提高项目的加载速度。
externals 配置可以是一个字符串、一个数组或者一个对象。其中,当 externals 配置为字符串时,该字符串表示对应模块的全局变量名;当 externals 配置为数组时,数组中的每个元素表示对应模块的全局变量名;当 externals 配置为对象时,对象的键表示对应模块的名称,值表示对应模块的全局变量名。
一个典型的 externals 配置示例:
```javascript
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};
```
上述配置表示将 jQuery 声明为外部依赖,并将其对应的全局变量名设置为 jQuery。这样,在打包时,webpack 就会忽略对 jQuery 的处理,而将其作为外部依赖引入。
相关问题
使用webpack中的externals配置项如何配置
externals配置项用于配置那些不需要打包进应用程序中的第三方依赖。
在webpack配置文件中,可以使用以下方式配置externals:
```
module.exports = {
externals: {
jquery: 'jQuery'
}
}
```
上面的配置表示jquery模块将不会被打包进应用程序中,而是在运行时通过全局变量jQuery来访问。
你也可以使用一个函数来配置externals,比如:
```
module.exports = {
externals: function(context, request, callback) {
if (request === 'lodash') {
return callback(null, '_');
}
callback();
}
}
```
上面的配置表示lodash模块将不会被打包进应用程序中,而是在运行时通过全局变量_来访问。
vite externals
Vite的externals是指在构建过程中将某些依赖项排除在bundle之外的功能。外部依赖项可以通过script标签来加载,而不是打包进入最终的应用程序文件中。
Vite的externals配置选项允许我们指定哪些模块应该被视为外部依赖项。这可以用于一些不经常变化的第三方库或者一些大型的依赖,以节省构建时间和生成的bundle大小。
在设置externals时,我们需要提供模块的名称和通过script标签来加载它们的URL。Vite将会在生成的HTML文件中自动插入这些script标签,并将这些外部依赖项从bundle中排除。
这种方式有助于提高应用程序的加载速度和性能。由于这些外部依赖项不需要每次更改它们时重新构建,因此可以减少开发过程中的重新构建次数,从而加快开发的效率。
使用Vite的externals非常简单,只需要在vite.config.js配置文件中设置externals选项即可。我们可以通过正则表达式来匹配多个模块,也可以根据需要取消对模块的外部化。
总之,Vite的外部依赖项功能使得我们能够更加灵活地处理一些第三方库或者大型依赖项,从而提高应用程序的性能和开发效率。这是Vite在构建过程中的一个有用的功能。