Webpack是一个基于模块化开发的前端打包工具。在webpack的配置中，external模块可以用于避免把某个不常用且较大的库打包进bundle.js中，而是在运行时从外部引入。这样做可以减小打包文件的体积，并且可以在多个应用中共享同一个库依赖。
配置
在webpack的配置文件中，我们可以通过配置externals选项来指定哪些模块应该从外部获取。该选项可以是一个对象，其中键表示要引入的模块名称，值则表示该模块在运行时的全局变量名称。
例如，如果我们想要引入jQuery作为外部模块，并且在运行时使用$作为全局变量名称，可以这样配置：
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};
这告诉webpack在打包时不将jQuery打包进bundle.js中，而是在运行时从外部引入jQuery，并使用全局变量jQuery来访问它。
示例1
现在我们来看一个实际的例子，假设我们有一个基于React的应用，我们想要在应用中引入外部的React库。我们可以这样配置webpack：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
externals: {
react: 'React',
'react-dom': 'ReactDOM'
}
};
这告诉webpack在打包时不将React和ReactDOM打包进bundle.js中，而是在运行时从外部引入。
接下来，我们在应用中通过script标签将React和ReactDOM引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React External Example</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
现在我们可以在应用中愉快地使用React了。
示例2
下面我们再来看一个实际的例子，假设我们有一个基于Vue的应用，我们想要在应用中引入外部的Vue库。我们可以这样配置webpack：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
externals: {
vue: 'Vue'
}
};
这告诉webpack在打包时不将Vue打包进bundle.js中，而是在运行时从外部引入。
接下来，我们在应用中通过script标签将Vue引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue External Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
现在我们可以在应用中愉快地使用Vue了。
总结
external模块是webpack中一个非常有用的功能，可以减小打包文件的体积，并且可以在多个应用中共享同一个库依赖。在使用external模块时，我们需要配置webpack的externals选项，并通过script标签将所需的库引入到应用中。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack external模块的具体使用 - Python技术站
微信扫一扫 
支付宝扫一扫 