vue 、webpcak引入cdn方式

1.单页面引入(默认src下的main.js入口)

index.html模板

  css:   <% for (var i in htmlWebpackPlugin.options && htmlWebpackPlugin.options.css) { %>
        <link href="<%= htmlWebpackPlugin.options.css[i] %>" rel="preload" as="style">
        <link href="<%= htmlWebpackPlugin.options.css[i] %>" rel="stylesheet">
        <% } %>

   js:  <% for (var i in htmlWebpackPlugin.options && htmlWebpackPlugin.options.js) {  %>
        <script src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
        <% } %>

vue.config.js配置

const path = require('path');
//启用热更新的第二步,导入webpack
const webpack = require('webpack');
//导入在内存中生成html页面的插件,只要是插件，都要放到plugins节点中去
const HtmlWebpackPlugin = require('html-webpack-plugin');
console.log(JSON.stringify(HtmlWebpackPlugin))
const cdn = {
    // 忽略打包的第三方库
    /**
     * externals 对象属性解析：
     * '包名' : '在项目中引入的名字'
     * 以element-ui举例 我再main.js里是以
     * import ELEMENT from 'element-ui'
     * Vue.use(ELEMENT, { size: 'small' })
     * 这样引入的，所以我的externals的属性值应该是ELEMENT
     */
    externals: {
        'vue': 'Vue',
        &#