2021-01-06

index.html 模板修改 新增 htmlWebpackPlugin

  
    
    
    
    
    
    
    
    

    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>
  
  
    
    

  

var path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

const cdn = {
  // 忽略打包的第三方库
  externals: {
    // vue: "Vue",
    // vuex: "Vuex",
    // "vue-router": "VueRouter",
    // axios: "axios",
    // moment: "moment",
    // "element-ui": "Element",
    echarts: "echarts",
  },

  // 通过cdn方式使用
  js: [
     "https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js",
      "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js",
      "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js",
    "https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js",
     "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/af.js",
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js",
    "https://lib.baomitu.com/echarts/4.0.0/echarts-en.common.js",
  ],
  // css: ["https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css"],
};

module.exports = {
  publicPath: "./",
  devServer: {
    open: true,
    port: 8098, // 端口
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // drop_console: process.env.NODE_ENV === "production", //清除 console 语句
  // drop_debugger: process.env.NODE_ENV === "production", //清除 debugger 语句
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.externals = cdn.externals;
    }

    Object.assign(config.resolve, {
      alias: {
        "@": resolve("./src"),
        assets: resolve("./src/assets"),
        common: resolve("./src/common"),
        components: resolve("./src/components"),
        styles: resolve("./src/styles"),
        views: resolve("./src/views"),
        plugins: resolve("./src/plugins"),
        "@business": resolve("./src"),
      },
    });
  },
  chainWebpack: (config) => {
    // 移除 prefetch 插件
    config.plugins.delete("prefetch");
    // 移除 preload 插件
    config.plugins.delete("preload");

    if (process.env.NODE_ENV === "production") {
      // 配置cdn引入
      config.plugin("html").tap((args) => {
        args[0].cdn = cdn;
        return args;
      });
    }
  },
};