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.
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.
Do you know NodeJS? If you know NodeJS, you can monitor folders and files with the fs module. By monitoring the src directory, you can trigger the vite whenever there is a change. This is the manual solution. I don't know if there are currently npm packages that provide this.