У меня есть файл style.css, который использует файл шрифта, и у меня возникают проблемы с загрузкой файла шрифта с помощью Webpack. Вот моя конфигурация загрузчика:
loaders : [
{
test : /\.(js|jsx)$/,
exclude : /node_modules/,
loader : 'react-hot!babel-loader'
}, {
test : /\.styl/,
loader : 'style-loader!css-loader!stylus-loader'
}, {
test : /\.css$/,
loader : 'style-loader!css-loader'
}, {
test : /\.(png|jpg)$/,
loader : 'url-loader?limit=8192'
}, {
test : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
loader : 'file-loader'
}
/*}, {
test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader : 'url-loader?limit=10000&minetype=application/font-woff'*/
]
Ошибки, которые я получаю,
ERROR in ./src/fonts/icon/fonts/mf-font.woff?lt4gtt
Module parse failed: /PATH/src/fonts/icon/fonts/mf-font.woff?lt4gtt Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./src/fonts/icon/style.css 2:293-331
Мне кажется, что Webpack берет его как файл CSS, когда он не работает. Но я уверен, что тестовое выражение передается для файла шрифта
Регулярное выражение в тестовом выражении имеет небольшую ошибку. woff(2) означает, что он всегда ищет woff2 и просто захватывает 2 в отдельной группе. Если после него добавить ?, webpack должен также распознать woff:
test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
Пожалуйста, дайте мне знать, если это сработало.
Это сделало трюк для меня:
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },