关于webpack CDN 优化 externals 配置插件别名

第一步

方法1 在index.html中引入js

<script src="cdn地址"></script> 

方法2 配置htmlWebpackPlugin 动态加载 （推荐）

// 2.1 index.html
<!-- 引入样式 -->
<% for (var i in htmlWebpackPlugin.options.css) { %>
<link href="<%= htmlWebpackPlugin.options.css[i] %>" rel="stylesheet" />
<!-- 引入js -->
<% } %> <% for (var i in htmlWebpackPlugin.options.js) { %>
<script src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
<% } %>
    
// 2.2 config/cdn.js
module.exports = {
  css: [...],
  js: [...]
}

// 2.3 vue.config.js
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].css = require('./config/cdn').css
        args[0].js = require('./config/cdn').js
        return args
      });
  },

第二步

 externals: {
        'vue': 'Vue',  // key 项目中别名设置，value CDN 的全局导出变量   
        'element-ui': 'ELEMENT',  
        'echarts': 'echarts',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'v-charts': 'VeIndex'
      }

vue-cli3 和webpack 如何配置externals 大同小异

vue.config.js

module.exports = {
configureWebpack:config => {
    return {
       externals: {
       .....
     }
    }
 }
}

webpack.config.js

module.exports = {
 externals: {
       .....
     }
}