#鲁班平台Monorepo+rspack构建优化实践

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
const { proxy } = require('luban-ci/devServer')
const { loadEnv } = require("luban-ci/load-dotenv");

process.env.PROJECT_NAME = 'cms'

const buildMode = process.env.LUBAN_BUILD_MODE || 'development'

const env = loadEnv(buildMode, '.')

/** @type {import('@rspack/cli').Configuration} */
const config = {
    context: __dirname,
    entry: {
       main: "./src/main.js"
    },
    output: {
       publicPath: '/'
    },
    devServer: {
       historyApiFallback: {
          index: '/index.html'
       },
       proxy: proxy
    },
    devtool: false,
    builtins: {
       html: [
          {
             template: "./index.html",
             favicon: "favicon.ico"
          }
       ],
       define: {
          "process.env": env || {}
       }
    },
    resolve: {
       extensions: [".vue", ".json", ".js"],
       alias: {
          "@": path.resolve(__dirname, "./src"),
          // 解决el-table在vue高版本渲染空白
          vue$: 'vue/dist/vue.esm.js',
          api: 'luban-common/lib/js/utils/request/api.js',
          "~": "luban-components",
          "js-lib": "luban-common/lib/js",
          "css-lib": "luban-common/lib/css",
          "project-conf": path.resolve(__dirname, "./src/project-conf"),
       }
    },
    plugins: [new VueLoaderPlugin()],
    module: {
       rules: [
          {
             test: /\.vue$/,
             use: ["vue-loader"]
          },
          {
             resourceQuery: /lang=ts/,
             type: "ts"
          },
          {
             test: /\.less$/,
             use: ["vue-style-loader", "css-loader", "postcss-loader", "less-loader"],
             type: "javascript/auto"
          },
          {
             test: /\.css$/,
             use: ["vue-style-loader", "css-loader", "postcss-loader"],
             type: "javascript/auto"
          },
          {
             test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
             type: 'asset',
          }
       ]
    }
};
module.exports = config;

const dotenv = require('dotenv')
const dotenvExpand = require('dotenv-expand')
const path = require('path')
const fs = require('fs')

// 处理默认环境变量
process.env.CI_COMMIT_SHORT_SHA = process.env.CI_COMMIT_SHORT_SHA || '0'

/**
 * 加载env文件
 * @param mode {string} 环境变量模式
 * @param envDir {string} env文件目录
 * @param prefixes {undefined | string[]} env变量前缀，只有该前缀的变量才会导出到客户端
 */
function loadEnv(mode, envDir, prefixes) {
  if (!prefixes) {
    prefixes = ["LB_"];
  }

  if (mode === "local") {
    throw new Error("local mode is not supported");
  }
  const env = {};
  const envFiles = [
    ".env",
    `.env.local`,
    `.env.${mode}`,
    `.env.${mode}.local`
  ];
  const parsed = Object.fromEntries(
    envFiles.flatMap((file) => {
      const filePath = path.join(envDir, file);
      const fileStat = fs.statSync(filePath, { throwIfNoEntry: false });
      if (fileStat && fileStat.isFile()) {
        return Object.entries(dotenv.parse(fs.readFileSync(filePath)));
      }
      return [];
    })
  );

  // 该指令除了处理env中的${}引用，还会将env中的变量注入到process.env中
  dotenvExpand.expand({ parsed });

  // 检查变量的前缀，只有LB_开头的变量才会导出到客户端
  for (const [key, value] of Object.entries(parsed)) {
    if (prefixes.some((prefix) => key.startsWith(prefix))) {
      env[key] = value;
    }
  }

  // 检查环境变量中是否还存在LB_开头的变量，如果存在，也导出到客户端
  for (const key in process.env) {
    if (prefixes.some((prefix) => key.startsWith(prefix))) {
      env[key] = process.env[key];
    }
  }

  return env;
}

module.exports = {
    loadEnv,
}

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");

module.exports = {
    mode: "production",
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "icons.js",
    },
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: "svg-sprite-loader",
                        options: {
                            symbolId: "luban-icon-[name]",
                        },
                    },
                ],
            },
        ],
    },
    plugins: [new webpack.ProgressPlugin(), new CleanWebpackPlugin()],
};