[Feature Request] add support for webpackInclude or similar

[goenning]

When code splitting is not enabled, ESBuild will bundle all dynamic imports together, which is exactly what I want in my scenario. The issue I have is that I need to statically name all modules I want to bundle, while in webpack I can do this:

export const AsyncPage = (pageName: string) =>
      import(
        /* webpackInclude: /\.page.tsx$/ */
        /* webpackChunkName: "[request]" */
        `@fider/pages/${pageName}`
      )

Is there a similar feature in ESBuild? Essentially I want to bundle all *.page.tsx into a single bundle and later use § import(pageName).then(...).

Note: I'm using the output bundle for Server Side Rendering, so having all pages in single build is OK.

---

The current solution I have is to keep a static map of all pages, which I'm trying to avoid.

const pages: { [key: string]: any } = {
  "Home/Home.page": require(`./pages/Home/Home.page`),
  "ShowPost/ShowPost.page": require(`./pages/ShowPost/ShowPost.page`),
  "SignIn/SignIn.page": require(`./pages/SignIn/SignIn.page`),
  "SignUp/SignUp.page": require(`./pages/SignUp/SignUp.page`),
  "Legal/Legal.page": require(`./pages/Legal/Legal.page`),
  "DesignSystem/DesignSystem.page": require(`./pages/DesignSystem/DesignSystem.page`),
}

const component = pages[pageName].default

[hyrious]

There's a fork of esbuild by netlify team doing what you said, it provides an extra plugin api build.onDynamicImport to do so.

There's another cheap solution in vite, you can write a plugin to search for specific function call, and then rewrite it to a static map like what you have done.

[evanw]

This issue is already a duplicate. Closing as a duplicate of #1240 and #700.