Шрифты не загружаются в webpack build

Question

Шрифты не отображаются в браузере, когда кажется, что процесс сборки работал нормально. Webpack правильно перемещает файлы шрифтов в каталог public/fonts. Созданные файлы css показывают правильный путь к файлу шрифта.

Вот конфигурация погрузчики:

{ 
    test: /\.s?css$/, 
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
}, 
{ 
    test: /\.(eot|svg|ttf|woff|woff2)/, 
    loader: 'file?name=../fonts/[name].[ext]' 
}, 
{ 
    test: /\.(png|jpg|gif)$/, 
    loader: "url-loader?limit=100000" 
} 

Вот выход сборки:

         Asset  Size Chunks    Chunk Names 
        ../fonts/icon_set_2.svg 20.9 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.eot 20.1 kB   [emitted] 
../fonts/glyphicons-halflings-regular.woff 23.4 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.ttf 45.4 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.svg 109 kB   [emitted] 
        ../fonts/icon_set_1.eot 71.6 kB   [emitted] 
        ../fonts/icon_set_1.woff 41.9 kB   [emitted] 
        ../fonts/icon_set_1.ttf 71.5 kB   [emitted] 
        ../fonts/icon_set_1.svg 98.5 kB   [emitted] 
        ../fonts/icon_set_2.eot 13.9 kB   [emitted] 
        ../fonts/icon_set_2.woff 7.85 kB   [emitted] 
        ../fonts/icon_set_2.ttf 13.7 kB   [emitted] 
../fonts/glyphicons-halflings-regular.woff2 18 kB   [emitted] 
         ../fonts/fontello.eot 533 kB   [emitted] 
        ../fonts/fontello.woff 321 kB   [emitted] 
         ../fonts/fontello.ttf 532 kB   [emitted] 
         ../fonts/fontello.svg 826 kB   [emitted] 
         ../fonts/Glyphter.eot 7.22 kB   [emitted] 
        ../fonts/Glyphter.woff 5.02 kB   [emitted] 
         ../fonts/Glyphter.ttf 7.06 kB   [emitted] 
         ../fonts/Glyphter.svg 45.2 kB   [emitted] 
          main.bundle.js 1.2 MB  0 [emitted] main 
          vendor.bundle.js 3.74 MB  1 [emitted] vendor 
         main.bundle.js.map 1.72 MB  0 [emitted] main 
         vendor.bundle.js.map 5.58 MB  1 [emitted] vendor 

Это из загрузочного файла, что браузер получает ,:

@font-face { 
    font-family: 'Glyphicons Halflings'; 

    src: url(/../fonts/glyphicons-halflings-regular.eot); 
    src: url(/../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(/../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(/../fonts/glyphicons-halflings-regular.woff) format('woff'), url(/../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(/../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); 
} 

И это структура каталогов общедоступного каталога

+ public 
    + build 
     main.bundle.js 
     vendor.bundle.js 
    + fonts 
     glyphicons-halflings-regular.eot 
     rest of font files... 

Но когда я пытаюсь использовать шрифты (глификоны), они не отображаются правильно.

Answer 1

Я не уверен, почему, но вы не можете использовать относительный путь для шрифтов. Я столкнулся с одной и той же проблемой, и моя работа заключалась в том, чтобы поместить шрифты в папку в каталоге «build». Так что ваша структура каталогов будет выглядеть следующим образом:

+ public 
    + build 
     main.bundle.js 
     vendor.bundle.js 
     + fonts 
      glyphicons-halflings-regular.eot 
      rest of font files... 

Вот что мои погрузчики выглядеть следующим образом:

{ 
    test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.(ttf|eot|svg)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
    loader: 'file-loader?name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
}, 

Также отметим, что по состоянию на Webpack 2.0 вы должны использовать * -loader версию для всех погрузчиков, а в моем примере.

Надеюсь, что это поможет.