Использование локальных веб-шрифтов с webpack

Question

Я пытаюсь использовать некоторые местные веб-шрифты в проекте React. Я включаю их в файл main.scss и загружаю их через webpack. Сборка сборки выполняется правильно, включая стили main.scss. Я вижу, что webpack загружает файлы шрифтов и копирует их в public/fonts /, но мой файл пакета не может найти шрифты.

Как я понимаю, ваш @ font-face src должен быть в зависимости от того, где будет пакет. Я устанавливаю это по тому же пути, что и загружаю шрифты в webpack, './fonts/'. Точная ошибка, что я вижу это:

file:///Users/myusername/Documents/folder1/folder2/folder3/APP/fonts/FoundersGroteskWeb-Regular.woff net::ERR_FILE_NOT_FOUND 

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

Структура файла:

APP 
├──webpack.config.js 
├──src 
    ├──app 
     ├──App.jsx 
     ├──styles 
      ├──main.scss 
      ├──fonts 
       ├──allthefonts.woff 
    ├──public 
     ├──bundle.js 
     ├──fonts 
      ├──allthefonts.woff 

App.jsx:

require('./styles/main.scss'); 

main.scss:

@font-face { 
    font-family: FoundersGrotesk; 
    src: url('./fonts/FoundersGroteskWeb-Bold.eot') format('eot'), 
     url('./fonts/FoundersGroteskWeb-Bold.woff') format('woff'), 
     url('./fonts/FoundersGroteskWeb-Bold.woff2') format('woff2'); 
    font-weight: bold; 
} 

@font-face { 
    font-family: FoundersGrotesk_Cnd; 
    src: url('./fonts/FoundersGrotXCondWeb-Bold.eot') format('eot'), 
     url('./fonts/FoundersGrotXCondWeb-Bold.woff') format('woff'), 
     url('./fonts/FoundersGrotXCondWeb-Bold.woff2') format('woff2'); 
    font-weight: bold; 
} 

@font-face { 
    font-family: FoundersGrotesk; 
    src: url('./fonts/FoundersGroteskWeb-Regular.eot') format('eot'), 
     url('./fonts/FoundersGroteskWeb-Regular.woff') format('woff'), 
     url('./fonts/FoundersGroteskWeb-Regular.woff2') format('woff2'); 
    font-weight: normal; 
} 

webpack.config.js:

'use strict'; 

const webpack = require('webpack'); 
const PROD = JSON.parse(process.env.PROD_ENV || '0'); 

module.exports = { 

    entry: './src/app/App.jsx', 

    output: { 
    path: './src/public/', 
    filename: PROD ? 'bundle.min.js' : 'bundle.js' 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: '/node_modules/', 
     query: { 
      presets: ['es2015', 'react', 'stage-1'] 
     } 
     }, 
     { 
     test: /\.s?css$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=./fonts/[name].[ext]' 
     } 
    ] 
    } 
}; 

Answer 1

Получил рабочий раствор, благодаря @omerts в this thread. Решение связано с использованием publicPath. Я пытался использовать его в качестве опции в module.exports с файловым загрузчиком шрифтов, а не с выходом.

Обновлено webpack.config.js:

const webpack = require('webpack'); 
const PROD = JSON.parse(process.env.PROD_ENV || '0'); 
const path = require('path'); 

const PATHS = { 
    build: path.join(__dirname, './src/public') 
}; 

module.exports = { 

    entry: './src/app/App.jsx', 

    output: { 
    path: PATHS.build, 
    filename: PROD ? 'bundle.min.js' : 'bundle.js', 
    publicPath: PATHS.build 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: '/node_modules/', 
     query: { 
      presets: ['es2015', 'react', 'stage-1'] 
     } 
     }, 
     { 
     test: /\.s?css$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=/fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|png)$/, 
     loader: 'file-loader?name=/fonts/[name].[ext]' 
     } 
    ] 
    }, 

    plugins: PROD ? [ 
    new webpack.optimize.UglifyJsPlugin({ 
     beautify: false, 
     comments: false, 
     compress: { 
     warnings: false, 
     drop_console: true 
     }, 
     mangle: { 
     except: ['$'], 
     screw_ie8: true, 
     keep_fnames: false 
     } 
    }) 
    ] : [] 
}; 

Answer 2

лучший подход должен был бы использовать 'URL-загрузчик' и добавьте следующую строку в погрузчикам.

{ 
    test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
    loader: 'url-loader?limit=100000' 
}