配置webpack的externals不打包第三方库

1、为什么要配置externals

*官方解释

 webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

意思就是如果引用了一个库但是又不想让webpack打包（减少打包时间）并且不影响我们在程序中以cmd、amd或者window/global全局等方式进行使用（一般都是以import方式使用），那就可以通过配置externals实现。

这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打包入bundle中，从而减少打包时间，但又不影响第三方库的运用。

2、externals支持模块上下文的方式

global - 外部 library 能够作为全局变量使用。用户可以通过在 script 标签中引入来实现。这是 externals 的默认设置。

commonjs - 用户(consumer)应用程序可能使用 CommonJS 模块系统，因此外部 library 应该使用 CommonJS 模块系统，并且应该是一个 CommonJS 模块。

commonjs2 - 类似上面几行，但导出的是 module.exports.default。

amd - 类似上面几行，但使用 AMD 模块系统。

3、怎么运用externals

例如：在index.hhtml中引入cdn资源query

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

vue.config.js配置如下：
说明：关于externals的配置，不同版本的配置略有不同，请根据自己的项目略作变更

module.exports = {
     chainWebpack: (config) => {
         config.set('externals', {
                 jquery: 'jQuery',
                 })
         },
}

这样的话在应用程序中依旧可以以import的方式（还支持其他方式）引用：

import $ from 'jquery';

这样不仅之前对第三方库的用法方式不变，还把第三方库剥离出webpack的打包中，从而加速webpack的打包速度。

4、打包结果对比

5、补充提升打包速度，减小打包体积的另一种方式-动态链表库