webpack5 externals打包时取消打包指定的库

简单说明

externals这个属性，常用来做cdn的功能，在打包的时候不打包指定的库，比如vue，jquery，然后在html文件部分，手动引入库的cdn链接，但是，你在开发的时候，你还是需要npm或者yarn安装这个库，import引入使用，只是打包的时候会自动剔除。

简单示例

webpack.config.js

module.exports = {
  externals: {
    uikit: "UIkit",
  }
}

可以看到，externals是一个对象，对象里面有key和value，其中key的值就是package.json里面，安装的包的名字。

而value值则有点麻烦，需要知道cdn引入的js文件，它在全局抛出的变量是啥。value就是他的全局变量名。

以UIkit为例，下载他的js文件，可以看到自运行的函数里面这段话。

可以看到，自运行函数传入了一个this，this就是window对象，函数用t参数接收this，然后在后面有一个三元判断，最终给t赋值了一个UIkit属性，这个就是全局变量了，其他的框架也是同理，如果压缩版js看不懂，看不压缩的也是一样的，一般这块函数不会被混淆。

这样我们的key和value就都有了，就能准确的在打包时，忽略不经常更新的库，利用cdn或者其他来提高网页的加载速度，减少首页白屏时间（spa）