Vite – change ouput directory of assets

by

The output filenames are configured in Rollup with build.rollupOptions:

  1. Set output.assetFileNames to configure the asset filenames (for media files and stylesheets).

  2. Set output.chunkFileNames to configure the vendor chunk filenames.

  3. Set output.entryFileNames to configure the index.js filename.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        1️⃣
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name.split('.').at(1);
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType="img";
          }
          return `assets/${extType}/[name]-[hash][extname]`;
        },
        2️⃣
        chunkFileNames: 'assets/js/[name]-[hash].js',
        3️⃣
        entryFileNames: 'assets/js/[name]-[hash].js',
      },
    },
  },
});

demo

More Related Contents:

  1. React: “this” is undefined inside a component function
  2. State not updating when using React state hook within setInterval
  3. “this” is undefined inside map function Reactjs
  4. What are these three dots in React doing?
  5. How do I conditionally add attributes to React components?
  6. React component initialize state from props
  7. How do I test axios in Jest?
  8. Why can’t I update props in react.js?
  9. Calling setState in a loop only updates state 1 time
  10. How to make a shared state between two react components?
  11. React Routing works in local machine but not Heroku
  12. Rendering React components with promises inside the render method
  13. react useEffect comparing objects
  14. CSS pseudo elements in React
  15. Get path params in react-router v4
  16. In reactJS, how to copy text to clipboard?
  17. Unexpected token < error in react router component
  18. Is there any other way to implement a “listening” function without an infinite while loop?
  19. Where should functions in function components go?
  20. How can I call parent method in a child React component?
  21. Where’s the connection between index.html and index.js in a Create-React-App application?
  22. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  23. How does JavaScript mechanism behind react hooks work?
  24. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  25. Component won’t update when a redux state change occurs
  26. React: adding props to an existing component
  27. passing data from child to parent component – react – via callback function
  28. FastAPI is not returning cookies to React frontend
  29. React Functional component: calling as function vs. as component
  30. Enzyme simulate an onChange event

Leave a Comment