webpack 外部扩展(Externals)

在日常开发中，我们可能要用到外部的一些库，但是又不想下载下来增加包的体量，那怎么办呢？webpack提供一个非常好用的 config,让我们一起来学习一下叭！

参考文档

使用方法：

比如我们要引入jquery，那么可以在 webpack.config.js中新增 externals选项，数组中 jquery 是表示你在使用的时候的名称，可以是 [jquery | $ ]是你在引入这个包的时候的名称。import $ from "jquery"; 当然，也可以配置多个，看业务需求。

webpack.config.js:

module.exports = () => {
    ...,
     externalsType: "script",
     externals: {
      jquery: ["https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js", "$"],
       lodash: [
        "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js",
        "_",
      ],
    },
    ...,
}

和正常 用 [npm | yarn | cnpm] 导入一样的使用方法：

import $ from "jquery";
import _ from "lodash";
$('<span></span>').text('Hello webpack!').appendTo('body');
const result = _.map([1, 2, 3], (num) => num * 2);

externalsType: "script"是表面以什么方式引入到浏览器中 script是以script标签的形式。

打包后的代码：

打包后的代码，webpack其实就是使用一个 promise的方式，动态地加载jQuery库，并返回一个Promise对象，该对象在jQuery成功加载后解析（resolve），如果加载失败，则拒绝（reject）并抛出一个错误；

推荐一个所有 框架和库稳定的cdn bootcdn