Webpack externals 配置详解：VueQuillEditor 示例

本文以 VueQuillEditor 为例，详细讲解 Webpack externals 配置中 key 和 value 的含义，并分析 VueQuillEditor 配置中的常见错误。

代码示例：

externals: {
    jquery: 'jQuery',
    Vue: 'Vue',
    Vuetify: 'Vuetify',
    VueQuillEditor: 'VueQuillEditor'
  },

分析：

value 值： 是该插件暴露出来的静态方法名称，例如 jQuery、Vue、Vuetify 等。
key 值： 是将来 require 的名称，例如 'vue-quill-editor'。

错误分析：

代码中的 VueQuillEditor: 'vue-quill-editor' 应该替换为 VueQuillEditor: 'VueQuillEditor'。

原因：

VueQuillEditor 在 main.js 中的引用方式为：import VueQuillEditor from 'vue-quill-editor'，因此在 externals 配置中，key 应该为 VueQuillEditor，value 应该为 'VueQuillEditor'。

总结：

Webpack externals 配置的目的是将一些外部库从打包文件中排除，以便在运行时从全局环境中获取。在配置 externals 时，需要确保 key 和 value 的正确性，才能使打包后的代码正常运行。