Specify different output file index.html

phil294 commented 3 months ago

Description

As discussed in #3456, it's not possible to change the output index.html.

Alternative

It's possible to only change chunk paths etc. using entryFileNames, not the index.html.

The following also doesn't modify the output location:

...
plugins: [
{
            name: 'xyz',
            enforce: 'post',
            generateBundle(opts, bundle) {
                // WORKS
                delete bundle['js/my-bundle.production.js'];
                // DOESN'T WORK
                delete bundle['index.html'];
            },
        },

So the only way currently is to output to a tmp path and write fs.writeFile kind of logic after the bundle has been created, move files around manually and delete the tmp folder again.

Additional context

As a sample use case, we are using Vite for bundling the JS files but don't care for the generated index.html as we have our own HTML provider server, injecting custom tags etc. Also Vite's output index.html overwrites the default fallback one which shouldn't be changed.

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

hi-ogawa commented 3 months ago

As a sample use case, we are using Vite for bundling the JS files but don't care for the generated index.html

Can you elaborate how you rely on html? For example, if the purpose is only for <script type="module" src="/js/main.ts" />, then you can specify js source file directly as build.rollupOptions.input: "/js/main.ts" as described in https://v4.vitejs.dev/guide/backend-integration.html.

The linked discussion https://github.com/vitejs/vite/discussions/3456 seems to have a slightly different motivation since it looks like the purpose is to swap out index.html and index.prod.html depending on dev/staging/prod build, which is a different need from backend integration.

KailasMahavarkar commented 3 months ago

If I understand your use case correctly, you want to bundle using Vite but without including the index.html file. I searched through Vite's source but couldn't find a way to do this directly (I'm new to Vite too).

But you can try:

// this will not generate a index.html but still uses rollup and vite plugins to achieve the behavior
export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                dir: "xdist", // Change output directory to xdist
            },
        },
    },
    plugins: [
        react(),
        {
            name: "remove-index-html",
            closeBundle() {
                const indexPath = path.resolve(__dirname, "dist/index.html");
                if (fs.existsSync(indexPath)) {
                    fs.unlinkSync(indexPath); // Delete index.html after build
                }
            },
        },
    ],
});

AFAIK vite even with rollup, doesn't have such support to not include index.html from output... but you can delete the index with plugin (which i'm sure you knew that already) ... anyways good question !

phil294 commented 3 months ago

you can specify js source file directly as build.rollupOptions.input: "/js/main.ts"

You're right, this works @hi-ogawa! Apologies, I failed to read the right docs apparently... 🤦

@KailasMahavarkar thanks for your input, but rollup's input option does work here! (even though the naming is very confusing)

vitejs / vite