4

First of all, I wanna say that I've started using Vite awhile ago and I'm no Vite expert in any shape or form.

Now, about my problem: I'm working on a Chrome Extension which requires me to have the files generated in the /dist folder. That works excellent using vite build. But, if I try to use only vite (to get the benefits of HMR), no files get generated in the /dist folder. So I have no way to load the Chrome Extension.

If anyone has faced similar issues, or knows a config that I've overlooked, feel free to share it here.

Thanks!

boka18
  • 307
  • 2
  • 11

1 Answers1

6

With this small plugin you will get a build after each hot module reload event :

In a file hot-build.ts :

/**
 * Custom Hot Reloading Plugin
 * Start `vite build` on Hot Module Reload
 */
import { build } from 'vite'

export default function HotBuild() {

  let bundling = false
  const hmrBuild = async () => { 
    bundling = true
    await build({'build': { outDir: './hot-dist'}}) // <--- you can give a custom config here or remove it to use default options
  };

  return {
    name: 'hot-build',
    enforce: "pre",
    // HMR
    handleHotUpdate({ file, server }) {
      if (!bundling) {
        console.log(`hot vite build starting...`)
        hmrBuild()
          .then(() => {
            bundling = false
            console.log(`hot vite build finished`)
          })
      }  
      return []
    }
  }
}

then in vite.config.js :

import HotBuild from './hot-build'

// vite config
{
  plugins: [
    HotBuild()
  ],
}
flydev
  • 4,327
  • 2
  • 31
  • 36
  • 1
    Thanx for the idea! But in my test app HMR isn't working anymore with this plugin. Aslo it writes files only on changes within the app code but not on start of the dev server. – FullStack Alex Mar 07 '22 at 11:37
  • Hi. Thanks. How can we make js to load from this built assets, not through dev server. My code still loaded from localhost:5173 not from local file. (I need it, bc I have a problem with loading web workers with laravel-vite) – ayb jax Dec 01 '22 at 09:57
  • 1
    @aybjax issue with (service- ?) workers is basically two things, self-signed cert and different origin. For development, a workaround can be to open chrome with the following switch: `chrome.exe" --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://mydevsite.dev`. You can post a new question with your dev details and tag me. – flydev Dec 01 '22 at 14:36
  • https://stackoverflow.com/questions/74641201/vite-dev-proxy-new-urlurl-import-meta-url was my question, but I seem not to find a solution – ayb jax Dec 12 '22 at 12:51