How to change the entry point to something other than the default 'src/main.js' using Vite?

Question

I want to point to a different location and file name and deviate from the Vite standard.

Let's say my js file is in out/frontend/../../out.js. I got it working when I rename it to main.js and copy it in the root of my project where index.html and vite.config.js live. But I would prefer to change the entry point somehow...

I tried this:

rollupInputOptions: {
  // or whatever your entry file is
  input: resolve(__dirname, 'out/frontend/my/path/out.js')
}

Did not work. Any suggestions?

Belgian

Answer 1

As of Vite 2, the entry file is specified in a <script> tag in index.html:

<script type="module" src="/src/main.js"></script>

You can change that file to the one you want:

<script type="module" src="/out/frontend/my/path/out.js"></script>

demo

Calais

Answer 2

Use resolve from path module and add an alias in vite.config.js config to resolve paths, check.

import { resolve } from 'path'

module.exports = {
  ...
  resolve: {
    alias: {
      '@': resolve(__dirname, '../out/'), // resolve path
    },
  },
  rollupInputOptions: {
    input: resolve(__dirname, '../out/entrypoint.js') // custom main
  }
}

• to import a module from resolved path use '@', eg: import { myModule } from '@/mymodule'
• You will have to adjust the path of the new entrypoint in the index.html file.

Sixteenth