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 引入，从而优化了应用的加载性能。