webpack引用外部js
Webpack 是一个流行的 JavaScript 模块打包工具，它可以将多个 JavaScript 文件及其依赖打包成一个或多个文件，以提高应用的加载速度和性能。在 Webpack 中引用外部 JavaScript 文件可以通过几种不同的方式实现，以下是一些基础概念和相关信息：
基础概念
外部脚本（External Script）：指的是那些不由 Webpack 打包，而是在 HTML 文件中直接通过 <script> 标签引入的 JavaScript 文件。
优势
- 缓存利用：外部脚本可以被浏览器缓存，减少重复加载。
- 并行加载：外部脚本可以与主应用代码并行加载，提高页面加载速度。
- 依赖管理：对于一些第三方库，如 jQuery 或 lodash，可以通过 CDN 引入，减少打包体积。
类型
- CDN 引入：通过内容分发网络（CDN）提供的 URL 引入。
- 本地文件引入：直接引用项目目录中的文件。
应用场景
- 第三方库：当使用广泛且稳定的第三方库时，可以通过 CDN 引入以节省带宽和提高加载速度。
- 性能优化：对于大型项目，将不经常更新的库作为外部脚本可以提高缓存利用率。
实现方法
方法一：通过 HTML 引入
在 HTML 文件中使用 <script> 标签直接引入外部 JS 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 引入外部 JS 文件 -->
<script src="https://example.com/some-library.js"></script>
<script src="bundle.js"></script>
</body>
</html>方法二：配置 Webpack 的 externals
在 Webpack 配置文件中设置 externals 属性，告诉 Webpack 某些依赖不需要打包，而是在运行时从环境中获取：
module.exports = {
// ...
externals: {
'jquery': 'jQuery' // 假设 jQuery 已经通过 CDN 引入
},
// ...
};然后在代码中可以像平常一样导入模块：
import $ from 'jquery';在 HTML 文件中，需要确保 jQuery 库已经被引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="bundle.js"></script>可能遇到的问题及解决方法
问题：外部脚本加载失败或顺序错误。
原因：可能是由于网络问题，或者脚本标签放置顺序不正确。
解决方法：
- 确保 CDN 地址正确无误。
- 使用
async或defer属性控制脚本加载行为。 - 在 Webpack 配置中正确设置
externals。
示例代码
假设我们有一个项目使用了 jQuery，并且想通过 CDN 引入它，而不是打包到最终的 bundle 中。
Webpack 配置 (webpack.config.js)：
module.exports = {
// ...
externals: {
jquery: 'jQuery'
},
// ...
};JavaScript 文件 (app.js)：
import $ from 'jquery';
$(document).ready(function() {
$('body').append('<h1>Hello, World!</h1>');
});HTML 文件 (index.html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>通过以上配置和代码，jQuery 将不会被 Webpack 打包，而是通过 CDN 引入，从而优化了应用的加载性能。
相关·内容
7分31秒
72-依赖注入之为类类型的属性赋值（引用外部的bean）
360
16分49秒
15-尚硅谷-webpack从入门到精通-js语法检查eslint
380
4分26秒
17-尚硅谷-webpack从入门到精通-压缩html和js
330
2分19秒
15.Webpack5从入门到原理-基础-处理js资源介绍
390
26分38秒
49.尚硅谷_JS基础_基本数据类型和引用数据类型
390
38秒
28.Webpack5从入门到原理-基础-html和js压缩介绍
380
3分50秒
03-尚硅谷-webpack从入门到精通-path.js文件分析
330
9分22秒
04-尚硅谷-webpack从入门到精通-start.js文件分析
370
10分55秒
48.Webpack5从入门到原理-高级-解决js兼容性问题CoreJS
360
18分16秒
02. 尚硅谷_自动化构建工具webpack_打包js,json文件.avi
3580
17分6秒
Web前端框架通用技术 webpack5 15_对js语法配置eslint进行检查 学习猿地
10.1K9
19分51秒
Web前端框架通用技术 webpack5 18_去除项目里的死代码(无用的js和css代码) 学习猿
3109
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
