原文连接：https://blog.csdn.net/zlingyun/article/details/81382323

    推荐一篇文章https://www.cnblogs.com/samli15999/p/7047968.html

    通过这种方式引入的依赖库，不需要webpack处理，编译进文件中，在我们需要，使用它的时候可以通过CMD、AMD、或者window全局方式访问。

    比如我们在index.html用CDN的方式引入jquery，webpack编译打包时不处理它，却可以引用到它。

    使用

    const $ = require(“jquery”)
    $(“#content”).html(“

    hello world

    “)
    配置

    externals: {
    jquery: “jQuery”
    },

    其实，我们使用这种方式的另一个目的是为了压缩工程大小，如果所有的依赖包都压缩打包到应用中，尤其是echart这样的大型库，会导致文件过大，如果外部引入，按需引入，可以压缩应用大小。

    我们可以自己写一个例子，引入到工程中

    定义一个tools.js文件
    编写一个方法
    window.Tools = {
    add: function(num1, num2) {
    return num1 + num2
    }
    }
    3.在index.html中引入它（先放到CDN中）


    4.配置externals

    externals: {
    mathTools: “tools”
    },
    5.使用

    const tools = require(‘mathTools’)
    const res = tools.add(1,2)
    或者

    Import tools = from ‘mathTools’
    var res = tools.add(1,2)
    Console.log(res)

    看了这个之后，我明白了一件事。

    我们引入到工程中的文件，无论是js，css还是别的什么，然后就可以把这些引入的文件和当前工程的文件看作在一个文件中，共享作用域，可以直接调用引入文件的变量，对象，方法。。。

    所以，在我们引入萤石云的js文件之后，它的功能是执行自己的视频，对外开放一个对象EZUIPlayer，我们就在externals中引入这个对象，在需要使用它的文件中import EZUIPlayer from ‘EZUIPlayer’ ，接下来就参考官方的例程，直接调用执行即可。

    举一反三，触类旁通，比如百度地图，echart图表，很多的第三方依赖库都可以这样用。

    ————————————————
    版权声明：本文为CSDN博主「zlingyun」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/zlingyun/article/details/81382323