webpack externals
时间: 2023-11-03 21:22:07 浏览: 41
webpack externals是webpack配置中的一个选项,用于指定哪些模块应该被视为外部依赖,不会被打包进最终的输出文件中。
在webpack中,通常会将项目中的第三方库或者共享模块作为外部依赖来引入。这样可以减小打包文件的体积,并且利用CDN或其他方式来加载这些外部依赖。通过使用externals选项,我们可以告诉webpack哪些模块是外部的,webpack在打包时会排除这些模块,让它们在运行时从外部引入。
externals选项可以是一个对象或一个函数。对象的键表示要排除的模块名,值表示该模块在全局环境中的变量名。函数的参数是模块的名称,返回值是该模块在全局环境中的变量名。例如:
```javascript
// webpack.config.js
module.exports = {
// ...
externals: {
react: 'React',
'react-dom': 'ReactDOM'
}
};
```
上述配置告诉webpack将react和react-dom模块视为外部依赖,并在打包时不将它们包含在输出文件中。在使用这些模块时,我们需要确保它们在运行时已经被加载。
请注意,externals选项只影响输出文件的打包行为,并不会影响代码中对这些模块的引用。因此,我们需要在运行环境中确保这些模块可用,比如通过在HTML文件中引入CDN链接。
相关问题
webpack externals 干什么用的
webpack externals 用于告诉 webpack 在打包时哪些模块是外部依赖,不需要被打包进最终的输出文件中,而是在运行时从外部引入。这样可以减小输出文件的体积,加快打包速度,同时也可以避免重复打包已经存在于外部的依赖。
webpack build externals
外部化(externals)是指在构建过程中将某些依赖排除在打包文件之外,而是通过在运行时从外部引入这些依赖。对于使用Webpack构建的项目,可以通过配置externals来实现这一目的。
配置externals的步骤如下:
1. 在webpack配置文件中找到externals选项。
2. 在externals选项中,可以指定一个对象来描述需要外部化的依赖。
3. 对象的键表示需要外部化的模块名称,值表示在引入模块时使用的全局变量。例如,键可以是模块的名称,值可以是模块在全局作用域中暴露的变量。
4. 当Webpack构建过程中遇到需要外部化的模块时,会将这些模块排除在打包文件之外,并在运行时从外部引入。
以下是一个示例的webpack配置文件,演示了如何使用externals:
```javascript
module.exports = {
// ...
externals: {
jquery: 'jQuery',
lodash: '_'
},
// ...
};
```
在上面的示例中,`jquery`和`lodash`模块被配置为外部化,分别使用全局变量`jQuery`和`_`进行引入。
使用externals可以减小打包文件的体积,并且可以利用全局变量或通过其他方式加载外部脚本来提供这些依赖项。这对于一些常见的库或框架如jQuery、React等特别有用,因为它们通常会被作为外部脚本引入。