@Froggyweb

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

День добрый. Для верстки использую сборку 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',
        },
      },
    },
  }
});
  • Вопрос задан
  • 643 просмотра
Решения вопроса 1
@desocrew
Чтобы избежать копирования контентных изображений и статических файлов в 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 для указания путей к файлам, которые мы хотим исключить из сборки. Вы можете изменять эти пути, чтобы подстроить их под свои нужды.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы