html entrypoint files in dist/src folder

[juliankasimir]

If I'm building a Chrome Extension and need the HTML, CSS, and JS files to be grouped together in the 'popup' folder within the 'dist' build directory, is it standard practice to configure it this way?

// vite.config.js
export default defineConfig({
  ...
  root: 'src',
  publicDir: '../public', // relative to root
  emptyOutDir: true, // if you still want to clear outDir without warning
  build: {
    outDir: '../dist/', // relative to root
    ...
  }
})

Source:
https://stackoverflow.com/questions/77091329/move-html-files-out-of-src-folder-in-dist-vite

[romhenri]

Yes, Is common and nice practice to configure the output structure of a Chrome Extension like that, especially when organizing files for a popup in the dist folder.

You can do something like this:

  root: 'src', 
  build: {
    outDir: '../dist', 
    rollupOptions: {
      input: {
        popup: 'src/popup/index.html', 
      },
      output: {
        entryFileNames: 'popup/[name].js',
        chunkFileNames: 'popup/[name].js', 
        assetFileNames: 'popup/[name].[ext]',
      },
    },
    emptyOutDir: true, 
  },
});```

[juliankasimir]

Thank you 👍

[juliankasimir]

I've now moved it to Q&A to define your answer as an answer.
Thank you.