Как в конфигурации webpack задать неявное расширение для chunk?

Как можно указать неявное расширение для изображений в настройках chunk, чтобы все изображения, независимо от их конкретного расширения, помещались в папку 'img' при сборке? Вот пример конфигурации:

```javascript
{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
  generator: {
    filename: './img/[name].[расширение]'
  },
},
```
  • 16 января 2024 г. 16:18
Ответы на вопрос 1
В вашем вопросе вы скорее всего имеете в виду не "неявное расширение для chunk", а неявный путь (или шаблон пути) для генерации имен файлов ресурсов, таких как изображения, при сборке веб-приложения с помощью webpack. Chunk - это термин, используемый для описания куска кода приложения, который обычно содержит JavaScript, а не статические ассеты, такие как изображения.

Для сохранения всех изображений в папку 'img' в вашем `output` каталоге, вы можете использовать свойство `generator.filename` в вашей конфигурации webpack для различных типов изображений. Специальная плейсхолдерная строка `[ext]` используется для обозначения расширения исходного файла. Вот как это может выглядеть:

```javascript
module.exports = {
  // ... другие настройки webpack ...
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          // Укажите паттерн для имени файла с указанием папки 'img' и плейсхолдером для расширения
          filename: 'img/[name][ext]'
        }
      },
      // ... другие правила ...
    ]
  },
  // ... другие настройки ...
};
```

Обратите внимание, что `[ext]` включает точку перед расширением файла, так что вам не нужно писать её явно (например, `.png`). Webpack автоматически заменит `[name]` на оригинальное имя файла и `[ext]` на оригинальное расширение файла для каждого импортированного ресурса, соответствующего тесту.

Такой подход позволяет webpack автоматически копировать изображения в папку 'img' с сохранением их оригинальных имен и расширений.
Похожие вопросы