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

Question

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.

Answer 1

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.

Answer 2

Building on @Mussini's answer, you have a few options:

1. Add --watch and optional --config: vite build --watch --config vite.config.ts on cli

2. Add to package.json:

   {
     "name": "frontend",
     ...
     "scripts": {
       "dev": "vite",
       ...
       "build-watch": "vite build --watch --config ./vite.config.js",
       "build": "vite build",
   

3. Integrate --watch into the vite.config.ts which adds watching to the build cmd by default (vite build does not exit!)

   export default defineConfig({
     build: {
       watch: './vite.config.js',
   

   You likely want option 2 and use with npm run build-watch