Как при сборке webpack 5 файлы распределить по папкам?

При сборке проекта с использованием webpack 5 можно распределить файлы по папкам с помощью настройки вывода (output) в конфигурации webpack.

Вот пример конфигурации, который позволяет распределить файлы:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      // Ваши правила для трансформации файлов
    ],
  },
  plugins: [
    // Ваши плагины
  ],
};

В данном примере после сборки файлы будут помещены в папку 'dist' и подпапку 'js'. Имя каждого файла будет соответствовать имени точки входа (entry) с добавлением хеша, чтобы избежать перезаписи файлов с одинаковыми именами.

Здесь используется метод path.resolve() для определения абсолютного пути к папке вывода. __dirname возвращает текущую директорию, а строка 'dist' определяет подпапку внутри неё.

Можно указать другой путь и/или название папки, в зависимости от ваших потребностей. Например, чтобы файлы с css стилями помещались в отдельную папку 'css', можно изменить настройку filename следующим образом:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name].js',
  assetModuleFilename: 'css/[name].[hash][ext][query]',
},

В данном случае будет создана подпапка 'css' в папке 'dist' для файлов со стилями.

Также, webpack предоставляет возможности использовать динамические значения для пути вывода. Например, чтобы выводить файлы в зависимости от их расширения, можно использовать следующий код:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[contenthash].js',
  assetModuleFilename: (pathData) => {
    const { extension } = pathData;
    switch (extension) {
      case 'js':
        return 'js/[name].[contenthash].js';
      case 'css':
        return 'css/[name].[contenthash].css';
      default:
        return 'assets/[name].[contenthash].[ext]';
    }
  },
},

В этом примере будет создана папка 'js' для файлов JavaScript, папка 'css' для файлов CSS и папка 'assets' для всех остальных файлов. Каждый файл будет иметь имя с хешем для более уникальных имен файлов.

В зависимости от вашей конкретной ситуации и структуры проекта, вы можете настроить пути вывода (output) в webpack таким образом, чтобы лучше соответствовать вашим требованиям.