Как настроить Vite для создания билда, чтобы выходные файлы CSS и JS размещались в отдельных папках?

Question

Айнур

node.js

Как настроить Vite для создания билда, чтобы выходные файлы CSS и JS размещались в отдельных папках?

Здравствуйте. <br/> В текущей конфигурации у меня генерируются следующие файлы: <br/> <b>assets/index.html    <br/>
assets/index.css     <br/>
assets/index.js</b> <br/> Однако я хочу, чтобы итоговым результатом стали: <br/> <b>assets/css/style.css     <br/>
assets/js/script.js</b> <br/> Подскажите, каким образом можно настроить выходные файлы на создание двух отдельных файлов (CSS и JS) в разных директориях? <br/> <pre><code class="javascript">import { defineConfig } from 'vite';
import { resolve } from 'path';
import autoprefixer from 'autoprefixer';

export default defineConfig({
    root: resolve(__dirname, 'src/admin'),
    plugins: [

    ],
    css: {
        postcss: {
            plugins: [
                autoprefixer({})
            ]
        },
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler'
            }
        }
    },
    build: {
        minify: 'terser',
        emptyOutDir: true,
        outDir: resolve(__dirname, 'assets'),
        rollupOptions: {
            output: {
                manualChunks: false,
                inlineDynamicImports: true,
                entryFileNames: '[name].js',
                assetFileNames: '[name].[ext]',
            }
        }
    },
    server: {
        port: 8080
    }
})</code></pre>

1 октября 2024 г. 8:04

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы настроить Vite для создания выходных файлов CSS и JS в отдельных папках (`assets/css/style.css` и `assets/js/script.js`), вам нужно изменить настройки в разделе `rollupOptions` в конфигурации `build`. В частности, вам нужно указать формат для выходных файлов с помощью `assetFileNames` и `entryFileNames`. Вот обновленная конфигурация:

```javascript
import { defineConfig } from 'vite';
import { resolve } from 'path';
import autoprefixer from 'autoprefixer';

export default defineConfig({
    root: resolve(__dirname, 'src/admin'),
    plugins: [],
    css: {
        postcss: {
            plugins: [
                autoprefixer({})
            ]
        },
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler'
            }
        }
    },
    build: {
        minify: 'terser',
        emptyOutDir: true,
        outDir: resolve(__dirname, 'assets'),
        rollupOptions: {
            output: {
                manualChunks: false,
                inlineDynamicImports: true,
                entryFileNames: 'js/script.js', // Путь для JS
                assetFileNames: 'css/style.css', // Путь для CSS
            }
        }
    },
    server: {
        port: 8080
    }
})
```

### Что изменено:
1. В `entryFileNames` указано `js/script.js`, чтобы скомпилированный файл JavaScript оказался в папке `assets/js/`.
2. В `assetFileNames` указано `css/style.css`, чтобы скомпилированный файл CSS оказался в папке `assets/css/`.

Этот подход должен сработать при условии, что вы компилируете только один CSS и один JS файл. Если у вас несколько файлов, то вам может потребоваться дополнительно настроить конфигурацию таким образом, чтобы обрабатывать несколько точек входа (entry points) должным образом.

Answer 2

<pre><code class="javascript">entryFileNames: 'js/script.min.js',
assetFileNames: ({ name }) =&gt; {
if (/\.css$/.test(name ?? ''))  return 'css/style.min.css';
}</code></pre>