Как решить конфликт шрифтов Webpack и регулярных выражений загрузчика изображений svg?

#webpack

#webpack

Вопрос:

Вот мое регулярное выражение для шрифтов и загрузчика изображений svg, и они конфликтуют, поскольку оба нацелены на файл *.svg. Как это решить?

  {test: /.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=/Presentation/_dist/fonts/Interstate/[name].[ext]'},
 {test:/.(png|jpg|gif|svg)$/, loader: 'url?limit=10000amp;name=/Presentation/_dist/images/[name].[ext]'}
  

Ответ №1:

Вы можете использовать exclude и include для устранения проблемы. Что-то вроде:

 {
    test: /.(eot|svg|ttf|woff|woff2)$/,
    include: [
        path.resolve(__dirname, "MY-FONTS-FOLDER")
        //, Any other svg font path
    ],
    loader: 'file?name=/Presentation/_dist/fonts/Interstate/[name].[ext]'
},
{
    test:/.(png|jpg|gif|svg)$/,
    exclude: [
        path.resolve(__dirname, "MY-FONTS-FOLDER")
        //, Any other svg font path
    ],
    loader: 'url?limit=10000amp;name=/Presentation/_dist/images/[name].[ext]'
}
  

Примечание:

  • Замените MY-FONTS-FOLDER фактическим путем к папке fonts.
  • Вы также можете использовать регулярное выражение для соответствия font.svg для загрузчика файлов и, .svg НО НЕ font.svg (возможно, отрицательный прогноз) для загрузчика url.

Комментарии:

1. Спасибо! Я не думал об этом!