react项目中使用vite和webpack怎么根据不同的条件打包不同的功能页面？

Question

比我有两个功能，一个看电影，一个吃饭。

然后根据不同的条件，打包时，只打包看电影或者只打包吃饭。

这种需求场景在vite和webpack下怎么实现呢？

Answer 1

假设你的多个页面在不同的文件夹，有不同的入口，路径为src/pages/页面名称/index.html

1. 可以通过配置环境变量的方式，定义要打包的页面

export default defineConfig(async ({ mode }) => {
    let { VITE_ENTRY } = loadEnv(mode, ".");
  ...
  return {
    root: resolve(__dirname, "src/pages/" + VITE_ENTRY + "/"),
    ...
    build: {
        ...
        rollupOptions: {
          input: {
            main: resolve(
              __dirname,
              "src/pages/" + VITE_ENTRY + "/",
              "index.html"
            ),
          },
        },
        outDir: resolve(__dirname, "dist/", VITE_ENTRY),
      },
  }
}