是指在webpack打包过程中,将外部变量引入到打包后的代码中使用。这样做的好处是可以减小打包后的文件体积,同时也可以避免重复打包已经存在于外部环境中的库或变量。
在webpack中,可以通过以下几种方式来使用外部变量:
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};
这样,在打包后的代码中,使用import $ from 'jquery'
时,webpack会将其替换为全局变量jQuery
。
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
})
]
};
这样,在打包后的代码中,使用import _ from 'lodash'
时,webpack会自动将其替换为全局变量lodash
。
<script src="https://cdn.example.com/library.js"></script>
然后,在打包后的代码中,可以直接使用该外部库的全局变量。
总结起来,使用外部变量可以通过externals配置、ProvidePlugin插件或直接引入外部库来实现。这样可以减小打包后的文件体积,同时也可以利用已有的外部环境中的库或变量,提高代码的复用性和性能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云