How to generate a build that exports each file type to its own folder?

Question

I'm using Vite. How to generate a build that exports each file type to its own folder?

I need an output similar to this:

/dist
    /styles/*.css
    /scripts/*.js
    /images/[*.png|*.jpg|*.gif]
    index.html

Answer 1

I solved it by adding the build script in vite.config.js

Refs: Vite - change ouput directory of assets

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'
import alias from '@rollup/plugin-alias'
import { resolve } from 'path'
import { imagetools } from 'vite-imagetools'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        svgLoader(),
        imagetools(),
        alias({
            entries: [
                {
                    find: '@',
                    replacement: resolve(__dirname, 'src'),
                },
            ],
        }),
    ],
    build: {
        rollupOptions: {
            output: {
                assetFileNames: (asset) => {
                    let typePath = 'styles/site'
                    const type = asset.name.split('.').at(1)
                    if (/png|jpe?g|webp|svg|gif|tiff|bmp|ico/i.test(type)) {
                        typePath = 'images/site'
                    }
                    return `${typePath}/[name]-[hash][extname]`
                },
                chunkFileNames: 'scripts/site/[name]-[hash].js',
                entryFileNames: 'scripts/site/[name]-[hash].js',
            },
        },
    },
})