该方法可以在打包时不将外链引用的第三方模块不打包到最终文件中，可以减少打包文件的体积，避免体积过大，影响用户体验，以下以 jquery 为例子,可以根据服务器的带宽来决定是否采用这种方式，带宽较小的，采用这种方式较好，因为一般第三方模块的下载速度都比较好
1、在模板 index.html 上使用 script 标签引入第三方模块外链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack 搭建 vue 应用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
2、webpack.config.js 中配置 externals
module.exports = {
externals: {
// 定义变量 haha 为 jQuery
// 业务代码引用时 import $ from 'haha' 即可
'haha': 'jQuery'
}
}
3、业务代码中使用
import $ from 'haha'
console.log($)
网友评论