2024年1月12日发(作者：)
webpack externals 语法
Webpack是一个现代JavaScript应用程序的模块打包工具，它可以将多个模块打包成一个或多个bundle文件，用于在浏览器中运行。Webpack具有灵活的配置选项，其中一个重要的配置选项是externals。
使用externals选项，我们可以指定不需要被打包进bundle的模块，在运行时从外部引入。这意味着这些模块将不会被webpack打包，而是在打包过程中被忽略。这在一些特定的场景中非常有用，尤其是在使用一些全局变量或外部库时。
指定externals模块的方法有两种：字符串形式和函数形式。
1.字符串形式：
在配置选项中，使用externals属性，并指定一个键（用于匹配引入的模块）和一个值（用于指定模块的全局变量）的对象。字符串形式的语法行为很简单，它的键是打包时通过import引入的模块名称，而值是该模块在全局变量中的名称。
举个例子，如果我们想在bundle中引入lodash库，但又不希望将它包含在打包文件中，我们可以这样配置：
```javascript
s = {
// ...
externals: {
//这里键是import中用到的模块名称，值是该模块在全局变量中的名称
lodash: '_'
}
};
```
这样，当在项目中通过import lodash from 'lodash'引入lodash库时，webpack不会将lodash打包进bundle文件，而是通过
外部引入方式获取。这需要引入lodash库的脚本在运行环境中已经存在。
2.函数形式：
在某些情况下，我们可能需要更复杂的逻辑来确定模块是否应该被作为外部模块进行引入。例如，如果模块的名字是某种格式的全局变量，我们可以使用函数形式的externals配置来动态地决定是否应该外部引入。
函数形式的externals可以返回一个对象或者一个字符串。如果返回一个字符串，此字符串将会作为全局变量名称使用。如果返回一个对象，对象的属性将会用作导入的模块名，而值将会被用作全局变量名称。
举个例子，假设我们的项目中使用了一个包含多个模块的全局变量(myLib)，我们只希望将其中的一个模块作为外部引入（1），我们可以这样配置：
```javascript
s = {
// ...
externals: {
myLib: function(context, request, callback) {
if (/^module1$/.test(request)) {
//将1作为外部模块进行引入
return callback(null, '1');
}
//其他模块正常打包
callback();
}
}
};
```
在这个例子中，外部模块是通过测试request参数的名字完成的。如果模块名字是module1，Webpack将它作为外部模块引入。
使用externals选项可以让我们充分利用已经存在的全局变量和第三方库，避免打包重复的代码进入bundle文件。这有助于减小bundle文件的体积，提升应用程序的性能和加载速度。
总结一下，externals是Webpack中一个重要的配置选项，用于指定不需要被打包进bundle的模块。我们可以通过字符串形式或函数形式来指定externals模块，以便在运行时从外部引入。使用externals选项，我们可以避免打包冗余的代码，减小bundle文件的体积，提升应用程序的性能。
发布者：admin，转转请注明出处：http://www.yc00.com/web/1705061195a1389847.html
评论列表（0条）