Search code examples
javascriptvite

How do I make Vite build my files every time a change is made?

I'm trying to make Vite build my files and output them into the dist folder every time I save/make changes on to my files during development.

How would I do that?

Here is my vite.config.development.js file:

import { defineConfig } from "vite";
export default defineConfig({
    base: "./",
    build: {
        rollupOptions: {
            output: {
                assetFileNames: "assets/[name].[ext]",
                chunkFileNames: "assets/[name].[ext]",
                entryFileNames: "assets/[name].js",
            },
        },
        write: true,
    },
});

Here is my scripts in package.json:

"frontend-dev": "vite --config vite.config.development.js",

It does the usual localhost:3000 thing, but it does not build my files and put them in the dist folder when I make changes to my source code.

Currently, I have to run a vite build npm script every time which takes a lot of time.

Solution

  • If you want Vite to do a rebuild on file changes, you can use the --watch flag:

    vite build --watch

    In your case, with a custom config file:

    vite build --watch --config vite.config.development.js

    With the --watch flag enabled, changes to the config file, as well as any files to be bundled, will trigger a rebuild and will update the files in dist.