webpack外部扩展

首先webpack官网中对于externals说的也很详细
**

1

**.在webpack.conf.js中写入你要引用的外部插件名称比如：

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

key值是你将来require的名称，value值是该插件暴露出来的静态方法名称，
但是这里有几个坑，我填一下

1. 你会发现value值除了第一个jQuery，其他的都是大写，所以你遇到报错时，一定要看看是不是大小写问题
2. 虽然上面说value是暴露出来的静态名称，但是有时是不一样的，比如我使用的编辑器插件：‘vue-quill-editor’
   在main.js中引用就是:import VueQuillEditor from ‘vue-quill-editor’,但是这里如果你写成 VueQuillEditor: 'vue-quill-editor’这样就是错的，必须是 VueQuillEditor: ‘VueQuillEditor’。所以有时候可能需要你进行驼峰命名进行引用
   **

2

**
然后在你的index.html中引入对应的script

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.1/dist/vuetify.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>  

这里我推荐两个cdn的搜索地址
第一个就是咋们常用的 boot cdn:https://www.bootcdn.cn/
第二个可能你不知道但是相对boot cdn比较稳定 jsdelivr：https://www.jsdelivr.com/（这个也是经过我实践得知的）
**

3

**
再就是在main.js中引用了
const Vue = require(‘Vue’)
const Vuetify = require(‘Vuetify’)
Vue.use(Vuetify, {
theme: theme2
})
const VueQuillEditor = require(‘vue-quill-editor’)
Vue.use(VueQuillEditor)

然后就结束了，另外如果你遇到新的webpack问题可以留言，一起解决