webpack external 详解

news2024/10/7 18:22:15

作用：打包时将依赖独立出来，在运行时（runtime）再从外部获取这些扩展依赖，目的时解决打包文件过大的问题。
使用方法：
在这里插入图片描述
附上代码块

	config.set('externals', {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      'ant-design-vue': 'antd',
      "moment": "moment",
      'vuex': 'Vuex',
      'jsoneditor': 'JSONEditor',
      'echarts': 'echarts'
    })

external 语法说明：
此处是一个key和value的形式，key是第三方依赖库的名称，
在这里插入图片描述
value 值可以是字符串，数组，对象，是第三方依赖打包后生成的js文件（引入的js静态文件或者cdn链接）执行后赋值给window的全局变量名称
全局变量名称如何去找，在node_modules的依赖包，如何找出全局变量名称，一般来说在umd文件中，找global 关键词，
在dist文件中，找exports 关键词，不行都找找
在这里插入图片描述

在这里插入图片描述

externals 配置了，index.html才可以引入插件的cdn,或者静态的插件js资源，且引入的cdn 的版本或者静态插件js版本，要和package.json以及package.lock.json保持一致才行
在这里插入图片描述

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.0.0/jsoneditor.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.0.0/jsoneditor.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>