跳到主要内容

externals

一、认识​

Externals（外部扩展） 配置项提供了从输出的 bundle 中排除依赖的方法。换句话说，Externals（外部扩展） 用来防止某些import 或者 require 的包打包到bundle中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)

说明

默认情况下，通过import语法或者require导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。

二、语法​

externals: {
  vue: 'Vue',
  lodash: '_',
  jquery: '$'
}

  • key: 第三方库名

  • value: 第三方库的全局变量名（CDN文件自动添加好的）

三、用法​

我们有时候会用CDN来加载一个第三方库，然后在模块文件中通过import、require引入并使用了它们。如果不做任何处理的话，那么这个第三方库会进行打包处理。这时候我们可以通过externals来排除，不让这个库进行打包。

3.1 配置​

externals: {
    vue: 'Vue',
    lodash: '_',
    jquery: '$'
}

3.2 引入​

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="
    https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
    "></script>
    <script src="
    https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
    "></script>
    <script src="
    https://cdn.jsdelivr.net/npm/vue@3.3.12/dist/vue.global.min.js
    "></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  </body>
</html>