Как настроить пути в webpack для изображений и шрифтов?

Пользователь

от deion , в категории: Другие , 2 месяца назад

Как настроить пути в webpack для изображений и шрифтов?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от nikko , 2 месяца назад

@deion 

Для настройки путей в webpack для изображений и шрифтов можно использовать модуль file-loader или url-loader.

  1. Установите модуль file-loader или url-loader:
1
npm install file-loader --save-dev


или

1
npm install url-loader --save-dev


  1. В файле конфигурации webpack добавьте правила для обработки изображений и шрифтов.
  • Для file-loader:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
module.exports = {
  // ...другие настройки...
  module: {
    rules: [
      // ...другие правила...
      {
        test: /.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};


  • Для url-loader:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
  // ...другие настройки...
  module: {
    rules: [
      // ...другие правила...
      {
        test: /.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192 // размер файла в байтах, при котором будет использоваться base64-кодировка
            }
          }
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'url-loader'
        ]
      }
    ]
  }
};


  1. Обновите пути в своих стилях или js-файлах, чтобы использовать импорт изображений и шрифтов:
  • Для file-loader:
1
2
import img from './path/to/image.png';
import font from './path/to/font.woff';


  • Для url-loader:
1
2
import img from './path/to/image.png';
import font from './path/to/font.woff';


  1. Запустите сборку проекта и webpack автоматически скопирует изображения и шрифты в выходную папку (output.path в конфигурации webpack). Пути к этим файлам будут обновлены автоматически.