Как правильно разделить assets в сборке?

Question

[Froggyweb]

День добрый. Для верстки использую сборку vite.js
Необходимо из сборки исключить контентные изображения и статичные файлы. Просто скопировав файлы в dist с сохранением структуры папок.
Проблема в том что в сборку тянутся все изображения в одну папку.
vite.config

import { defineConfig } from 'vituum';
import nunjucks from '@vituum/nunjucks';

export default defineConfig({
  integrations: [nunjucks()],
  templates: {
    format: 'njk',
  },

  filenamePattern: {
    '+.css': false,
    '+.scss': 'src/styles',
  },
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            let extType = assetInfo.name.split('.').at(1);
            if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
              console.log(assetInfo)
              extType = 'img';
            }
            return `assets/${extType}/[name][extname]`;
          },
          chunkFileNames: 'assets/js/[name].js',
          entryFileNames: 'assets/js/[name].js',
        },
      },
    },
  }
});

Answer 1

[Deso Crew]

Чтобы избежать копирования контентных изображений и статических файлов в dist, вы можете добавить правила исключения для этих файлов в ваш файл конфигурации Vite. Для этого можно использовать опцию exclude в секции build вашего файла конфигурации.

Вот пример кода, который позволит вам исключить все контентные изображения и статические файлы из вашей сборки Vite:

import { defineConfig } from 'vituum';
import nunjucks from '@vituum/nunjucks';

export default defineConfig({
  integrations: [nunjucks()],
  templates: {
    format: 'njk',
  },

  filenamePattern: {
    '+.css': false,
    '+.scss': 'src/styles',
  },

  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            let extType = assetInfo.name.split('.').at(1);
            if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
              console.log(assetInfo)
              extType = 'img';
            }
            return `assets/${extType}/[name][extname]`;
          },
          chunkFileNames: 'assets/js/[name].js',
          entryFileNames: 'assets/js/[name].js',
        },
      },
      // исключение контентных изображений и статических файлов
      exclude: [
        '**/*.{png,jpg,jpeg,gif,svg,bmp,tiff,ico}',
        '**/*.{txt,json,html,css,js,map}',
      ],
    },
  },
});

Здесь мы использовали exclude для указания путей к файлам, которые мы хотим исключить из сборки. Вы можете изменять эти пути, чтобы подстроить их под свои нужды.

Comments

[Froggyweb]

спасибо громадное :)