CODEWITHSUNDEEP
buildconfigvite
Helge
Helge

Reputation: 73

Vite - empty assets folder (not whole outputDir)

Due to other construction services e.g. from the CMS that is in use also puts files in the same folder as outPutDir I only need to empty the assets folder. At the same time, I want to keep the folder structure that comes by default by only specifying outPutDir

Is this possible with Vite?

I do not find anything about this in the documentation for Vite. However, this does not mean that it is not mentioned somewhere.

  build: {
    outDir: '../wwwroot/',
    emptyOutDir: true,
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/js/[name].[hash].js',
        entryFileNames: 'assets/js/[name].[hash].js',

        assetFileNames: ({name}) => {
          if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
            return 'assets/images/[name].[hash][extname]';
          }

          if (/\.css$/.test(name ?? '')) {
            return 'assets/css/[name].[hash][extname]';
          }

          return 'assets/[name].[hash][extname]';
        },
      },
    },
  },

Upvotes: 6

Views: 3242

Answers (2)

Motla
Motla

Reputation: 1230

In vite.config.js just create a Rollup plugin which deletes the assets folder in the buildStart hook:

import { defineConfig } from 'vite'
import { resolve } from 'path'
import { rm } from 'node:fs/promises'

export default defineConfig({
  plugins: [{
    name: "Cleaning assets folder",
    async buildStart() {
      await rm(resolve(__dirname, '../wwwroot/assets'), { recursive: true, force: true });
    }
  }],
  build: {
    // ...
  }
}

Documentation:

Upvotes: 8

Helge
Helge

Reputation: 73

The solution in my case is to reroute where the CMS pick up the assets files from the frontend build.

It does not solve my original challenge but it solves my problem.

  build: {
    outDir: '../wwwroot/public/',
    sourcemap: true,
    manifest: true,
    reportCompressedSize: true,
    emptyOutDir: true,
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',

        assetFileNames: ({ name }) => {
          if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
            return 'images/[name].[hash][extname]';
          }

          if (/\.css$/.test(name ?? '')) {
            return 'css/[name].[hash][extname]';
          }

          return '[name].[hash][extname]';
        },
      },
    },
  },

Upvotes: 0

Related Questions