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

1

npm install file-loader --save-dev

1

npm install url-loader --save-dev

 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'
        ]
      }
    ]
  }
};

 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
2

import img from './path/to/image.png';
import font from './path/to/font.woff';

1
2

import img from './path/to/image.png';
import font from './path/to/font.woff';