Webpack外部引入Element和Vue

原理： 使用Webpack的externals配置，从html的script中加载包，并且能在 webpack的项目开发中像使用npm安装包一样使用import引入这个全局变量

原因：优化加载

• 通过npm安装的包，会一起打包成vendors文件，如果安装包过多，这个文件就会很大，影响加载。而且很多通用的包有CDN，也更方便提高加载速度。
• 下图为一个基础项目的打包后文件，只装了Vue、Element和一些基础包，就700多K，正常项目下来， vender至少1M
  

修改配置

1. index.html引入第三方包

<!-- 引入Vue,必须先于Element引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Element样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入Element组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 修改webpack.base.conf.env

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
+  externals: {
+  'vue': 'Vue', // key 为在项目中使用的值， value为全局下绑定的对象的key
+    'element': 'ELEMENT'
+  }
}

3.使用

• 正常使用就行，例如main.js

var Vue = require('vue')
var element = require('element')
import App from './App.vue'

import router from './router'
import store from './store'

Vue.use(element)
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

待填坑

• 这种方法只适用于没有使用TS的项目。如果上了TS，基本也是同样的配置，项目是可以正常启动，vscode会报找不到模块，控台出现一堆错误。等有空了再看怎么在TS中外部引入第三方库吧