url-loader

Загрузчик для webpack, преобразующий файлы в URI base64.

Начало работы

Для начала вам необходимо установить url-loader:

$ npm install url-loader --save-dev

url-loader работает как file-loader, но может возвращать DataURL, если размер файла меньше определенного лимита.

index.js

import img from './image.png';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

И запустите webpack с помощью предпочитаемого метода.

Параметры

fallback

Тип: String Значение по умолчанию: 'file-loader'

Указывает альтернативный загрузчик, который будет использоваться, если размер целевого файла превышает лимит, заданный параметром limit.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: require.resolve('responsive-loader'),
            },
          },
        ],
      },
    ],
  },
};

Загрузчик по умолчанию получит те же параметры конфигурации, что и url-loader.

Например, для задания параметра quality для responsive-loader выше используйте:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: require.resolve('responsive-loader'),
              quality: 85,
            },
          },
        ],
      },
    ],
  },
};

limit

Тип: Number|Boolean|String Значение по умолчанию: undefined

Лимит может быть задан через параметры загрузчика и по умолчанию не ограничен.

Number|String

Числовое или строковое значение, определяющее максимальный размер файла в байтах. Если размер файла равен или больше лимита, будет использован file-loader (по умолчанию), и все параметры запроса будут переданы ему. Использование альтернативы file-loader активируется параметром fallback.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

Boolean

Включить или отключить преобразование файлов в base64.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false,
            },
          },
        ],
      },
    ],
  },
};

mimetype

Тип: String Значение по умолчанию: (file extension)

Устанавливает тип MIME для преобразуемого файла. Если не указано, тип MIME будет определяться по расширению файла.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png',
            },
          },
        ],
      },
    ],
  },
};

Участие в разработке

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

CONTRIBUTING

Лицензия

MIT