webpack排除打包的流程

1.先在vue.config.js中定义需要忽略的外部包 (单词皆为语义化或者固定要求的)

let externals = {}
let cdn = {css: [], js: []}
const isProduction = process.env.NODE_ENV === 'production'

2.判断当前所处的环境, 动态的添加忽略文件配置

if(isProduction) {
    externals = {
        //externals  对象属性解析;
        //属性格式为 '包名' : '在项目中引入的名字'(根据官网,不同版本可能不同)
        'vue': 'Vue',               
        'element-ui': 'ELEMENT',    
        'cos-js-sdk-v5': 'COS'      //腾讯云用于对象存储上传的包
    }
    cdn = {
        css:[ '引入的css文件地址', 'xxx'... ]
        js:[ '引入的css文件地址', 'xxx'... ]
    }
}

3.在vue.config.js中 配置 configureWebpack和chainWebpack 属性,在其中添加以下配置

module.exports = {
    configureWebpack: {
        externals: externals
    }
    chainWebpack(config) {
        config.plugin('html').tap(args => {
          args[0].cdn = cdn   // 配置cdn给插件
          return args
        })
    }
}

4.在 public / index.html 里引入 css 和 js

<!-- 在title标签下面引入样式 -->
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
    <% } %>
      
<!-- 再body标签的下标签前引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>