HTML entry points do not respect custom output path

[yzrmn]

Hi :)

The ability of copying HTML files to the output directory with the copy loader is very useful. Unfortunately, for my scenario it only "kind of" works:

package/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── index.ts
│   └── ...
└── ...

build({
    bundle: true,
    entryPoints: {
        "./index": "./src/index.ts",
        "./index.html": "./public/index.html",
    },
    format: "esm",
    loader: { ".html": "copy" },
    outdir: "./dist",
});

This results in

package/
├── dist/
│   ├── public/
│   |   └── index.html
│   └── index.js
└── ...

which is not the desired layout (index.html should be in the directory as index.js).
It does not matter what the custom output path of ./public/index.html is, the output structure will always be the same.

I would like to avoid putting the index.html in ./ or ./src, which would both work because with ./ I could manipulate the output path of index.ts and with ./src both files are in the same directory.

However, I found a hacky way to make it work:

build({
    bundle: true,
    entryPoints: {
        "./index": "./src/index.ts",
        "does_not_matter_anyway": "./public/index.html",
    },
    format: "esm",
    loader: { ".html": "copy" },
    outbase: "./public",
    outdir: "./dist",
});

Result:

package/
├── dist/
│   ├── index.html
│   └── index.js
└── ...

This feels like an unnecessary solution though. Is it intended to ignore the custom output path for HTML files?

[evanw]

Is it intended to ignore the custom output path for HTML files?

No, this is a bug. I haven't considered this edge case before but I'd expect this to work too. Thanks for the bug report.

Edit: I think you'd have to do this instead once this bug has been fixed:

 build({
     bundle: true,
     entryPoints: {
         "./index": "./src/index.ts",
-        "./index.html": "./public/index.html",
+        "./index": "./public/index.html",
     },
     format: "esm",
     loader: { ".html": "copy" },
     outdir: "./dist",
 });

The reason is because the extension is always implicit with the way the custom entry point output paths feature currently works.

[hyrious]

So there can't be entry points with the same basename right? i.e. { index: 'index.ts', index: 'index.html' }.

[evanw]

Yeah... That's not a limitation of the underlying engine though. It works in Go and the CLI. It's just a limitation of the JS shim. I chose a JS mapping over an array for syntax convenience, but then of course you can't do this. I should also allow an array of some form too. Thanks for calling this out.

[mebest100]

@evanw Does esbuild have similar html plugin as html-webpack-plugin which can auto render index.html template and fill in with
already built js/css tags? Thx!

[mirilled]

@evanw Does esbuild have similar html plugin as html-webpack-plugin which can auto render index.html template and fill in with already built js/css tags? Thx!

I found esbuild-plugin-html. It helped me solve same problem.