1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35

import { glob } from "glob";
import { defineConfig } from "vite";

export default defineConfig(async () => {
  // In Vite you need to explicitly enumerate every HTML files.
  // Otherwise it won't be built, although it works on dev server.
  const htmlFiles = await glob("**/*.html", {
    ignore: ["dist/**"],
    // @ts-ignore: ESM-Node.js thing
    cwd: __dirname,
    withFileTypes: true,
  });

  return {
    // Use relative paths for output files. At least this docs site does not
    // rely on absolute paths so there is no advantage for absolute paths,
    // which Vite defaults to.
    base: "",
    build: {
      rollupOptions: {
        input: Object.fromEntries(
          htmlFiles.map((path, i) => [i, path.fullpath()])
        ),
        output: {
          // With [name] in it, Vite (or Rollup idk) uses a file name of the first HTML file
          // access the asset. For example, examples/style.css became dist/parameter-missing-error-[hash].css
          // in my testing and dist/examples/file.html imports dist/parameter-missing-error-[hash].css.
          // This is not directly visible to users but confusing enough for whom examined raw HTML for
          // markup usage.
          assetFileNames: "[hash:12][extname]",
        },
      },
    },
  };
});