Webpack快速上手（五）外部拓展

前言

在日常开发中，我们需要使用很多第三方插件，例如lodash、jQuery等，这些插件不仅需要在开发环境安装，生产环境依旧需要。这就导致一个问题，webpack会把这些第三方插件也打进包里面，大大增加了包的体积，给服务器带来了流量的压力，可不可以直接引用这些包的CDN地址，而不用安装这些包呢？

外部拓展

首先，我们需要找到插件的CDN地址，可以使用BootCDN搜索：BootCDN
找到CDN地址后，我们在webpack.config.js中做如下配置：

module.exports = {
  ...
  externalsType: 'script',
  externals: {
    jQuery: ['https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js', 'jQuery']
  }
}

然后我们尝试在js中使用jQuery：

import $ from 'jQuery'
console.log($)

运行后的结果：

可以看到，jQuery已经打印了出来，我们可以用这种方式引入第三方库。