Как заставить работать asset/source в webpack 5 с помощью query и chainWebpack?

В Webpack 5 использование asset/source для обработки ресурсов стало более простым и удобным. Чтобы настроить asset/source в webpack 5 с помощью query и chainWebpack, вам потребуется выполнить несколько шагов.

1. Установите необходимые зависимости: webpack и webpack-cli.

npm install webpack webpack-cli --save-dev

2. Создайте файл конфигурации webpack.config.js в корне вашего проекта.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /.(png|jpg|gif)$/i,
        type: 'asset/source',
      },
    ],
  },
};

3. В модуле rules определите правило для обработки ресурсов с помощью asset/source. В данном примере мы обрабатываем файлы с расширениями png, jpg и gif.

4. В вашем package.json добавьте следующие скрипты:

"scripts": {
  "build": "webpack"
}

5. Теперь запустите сборку:

npm run build

После выполнения этих шагов, Webpack будет обрабатывать все ресурсы с расширениями png, jpg и gif как модули типа "asset/source". Это означает, что они будут загружены и экспортированы как URL-строки с данными (Data URLs) в вашем JavaScript-коде. Вы можете использовать эти URL-строки и использовать их в вашем коде, например, как значения src атрибутов в теге img.

Используя query и chainWebpack, вы можете настроить дополнительные опции для asset/source. Например, вы можете определить размер файлов, при котором они будут загружены как URL-строки с данными или будут сохранены в качестве отдельных файлов на диске.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(png|jpg|gif)$/i,
        type: 'asset/source',
        generator: {
          filename: 'images/[name][ext]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // Размер файла, при котором он будет загружен как URL-строка с данными
          },
        },
      },
    ],
  },
};

В данном примере мы определяем, что файлы, размер которых меньше или равен 8 кб, будут загружены как URL-строки с данными. Файлы, размер которых больше 8 кб, будут сохранены в папке 'images' с оригинальным именем и расширением.

Это лишь примеры возможностей использования asset/source в webpack 5 с помощью query и chainWebpack. Вы можете настроить их для своих конкретных потребностей в вашем проекте.