Как распределить файлы по расширению по папкам — Webpack?

Вебпак - это инструмент, который позволяет объединять и управлять модулями и зависимостями в веб-приложении. Он также имеет возможность оптимизации и упаковки кода для продакшн среды.

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

Для распределения файлов по папкам по расширению вебпак предоставляет несколько подходов:

1. Плагин CopyWebpackPlugin. Этот плагин позволяет копировать файлы и папки из исходной директории в выходной каталог с сохранением структуры. Чтобы распределить файлы по папкам в зависимости от их расширения, вам нужно настроить правила копирования с использованием регулярных выражений. Например:

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... остальная конфигурация Webpack ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src',
          to: 'dist',
          filter: (resourcePath) => {
            return /.js$/.test(resourcePath); // распределение только файлов с расширением .js
          },
          toType: 'dir',
        },
        {
          from: 'src',
          to: 'assets',
          filter: (resourcePath) => {
            return /.(png|jpg|jpeg|gif)$/.test(resourcePath); // распределение только файлов с расширением .png, .jpg, .jpeg или .gif
          },
          toType: 'dir',
        },
      ],
    }),
  ],
};

2. Пользовательский загрузчик. Вы можете создать загрузчик, который будет отфильтровывать и перемещать файлы в нужные папки в зависимости от их расширения. Пример загрузчика:

const path = require('path');

module.exports = function(content) {
  const extension = path.extname(this.resourcePath);
  
  if (extension === '.js') {
    this.emitFile('dist/js/' + path.basename(this.resourcePath), content);
  } else if (extension === '.png' || extension === '.jpg' || extension === '.jpeg' || extension === '.gif') {
    this.emitFile('dist/assets/' + path.basename(this.resourcePath), content);
  }

  return content;
};

После создания загрузчика вам нужно зарегистрировать его в конфигурации вебпака:

module.exports = {
  // ... остальная конфигурация Webpack ...
  module: {
    rules: [
      {
        test: /.(js|png|jpg|jpeg|gif)$/, // загрузчик будет применяться только к файлам с указанными расширениями
        use: 'path-to-custom-loader',
      },
    ],
  },
};

Выбор между плагином и загрузчиком зависит от ваших потребностей и предпочтений. Плагин CopyWebpackPlugin проще в использовании, но загрузчик более гибкий и позволяет настроить более сложную логику распределения файлов.