const { defineConfig } = require("@vue/cli-service");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("@kasite/element-plus/element-plus-resolver.js");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const _config = require("./config/index.js");
const { name } = require("./package.json");
const path = require("path");

/** 获取参数值 */
const getBranchName = (argName) => {
  const argIndex = process.argv.findIndex((arg) => arg.indexOf(`--${argName}`) > -1);
  if (argIndex > -1) {
    const [name, value] = process.argv[argIndex].split("=");
    return value;
  }
  return;
};
const branchName = getBranchName("branch"); // 分支名称
process.env.VUE_APP_BRANCH_NAME = branchName || "master";
/** 获取入口 */
const getEntry = () => {
  const mainPath = `${branchName ? `${branchName}/` : ""}` + "main.ts";
  const entry = `src/${branchName ? "branch/" : "master/"}${mainPath}`;
  const entries = {
    index: {
      // page的入口
      entry,
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      title: _config.system,
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
  };
  return entries;
};

const pages = getEntry();
module.exports = defineConfig({
  //基本路径
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/demo",
  pages: pages,
  //构建时的输出目录
  outputDir: "dist",
  //放置静态资源的目录
  assetsDir: "static",
  //html 的输出路径
  indexPath: "index.html",
  //文件名哈希
  filenameHashing: true,
  //是否在保存的时候使用 `eslint-loader` 进行检查。
  lintOnSave: false,
  //是否使用带有浏览器内编译器的完整构建版本
  runtimeCompiler: true,
  //babel-loader 默认会跳过 node_modules 依赖。
  transpileDependencies: [
    /* string or regex */
  ],
  //是否为生产环境构建生成 source map？
  productionSourceMap: false,
  //设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
  crossorigin: "",
  //在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
  integrity: false,
  configureWebpack: {
    // 自动导入element-plus
    plugins: [
      Components({
        dirs: ["src/components"],
        deep: true,
        resolvers: [
          ElementPlusResolver({
            prefix: "Zy",
          }),
        ],
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "./config/index.js",
            to: "./config",
          },
        ],
      }),
    ],
    output: {
      // library: `${name}-[name]`,
      // libraryTarget: "umd",
      chunkLoadingGlobal: `webpackJsonp_${name}`,
      globalObject: "window",
    },
  },
  chainWebpack: (config) => {
    config.resolve.alias.set("@", path.resolve(__dirname, "src/master"));
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: (tag) => /^micro-app/.test(tag),
        };
        return options;
      });
  },
  // CSS 相关选项
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
    extract: true,
    // 是否开启 CSS source map？
    sourceMap: false,
    // 为预处理器的 loader 传递自定义选项。比如传递给
    // Css-loader 时，使用 `{ Css: { ... } }`。
    loaderOptions: {
      sass: {
        //新版scss-loader(10.0及以上) prependData (data)
        additionalData: (content, loaderContext) => {
          const { resourcePath } = loaderContext;
          const path = "variable.scss";
          if (resourcePath && resourcePath.indexOf(path) > 0) return content;
          return `@use "@/assets/scss/${path}" as *; ${content}`;
        },
      },
    },
  },
  devServer: {
    // headers: {
    //   "Access-control-Allow-Origin": process.env.NODE_ENV === "production" ? "" : "*",
    // },
    proxy: {
      "/api": {
        target: _config.baseURL, //api服务器地址
        changeOrigin: true, //是否允许跨域
        secure: false,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
});