使用webpack时找不到导入模块的字体文件

我有一个

React

应用程序，正在使用

webpack

作为模块绑定器。我正在为一些输入字段使用模块

react widgets

react widgets

附带一个默认的css

react widgets.css

，我想将它包含在我使用的组件中

require('react-widgets/dist/css/react-widgets.css')

在css文件中，有对字体文件的引用，这些引用位于

react widgets/dist

运行应用程序时，我在浏览器控制台上看到错误：

Uncaught Error: Cannot find module "../fonts/rw-widgets.eot?v=4.1.0"

下面是我的网页包加载器配置

module: {
loaders: [{
  test: /\.jsx?$/,
  loader: 'babel',
  include: path.join(__dirname, 'src'),
  query: {
    presets: ['react', 'es2015', 'stage-0']
  }
},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }]
}

我猜问题可能是

webpack

正在查找字体文件相对于

webpack.config.js

文件所在位置的位置，而不是相对于css文件的位置

---

请告诉我如何解决此问题？

我在

react widgets

中遇到了相同的错误，并发现此正则表达式：

/\（png | woff | woff2 | eot | ttf | svg）$/

dodn与Web包尝试加载的文件名不匹配：

rw widgets.eot？v=4.1.0，因为？v=4.1.0部分

因此，在我和您的案例中更正正则表达式：

/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/

但这还不够，因为还会有其他错误，所以对我来说有效的最终版本是：

{ 
    test: /\.(jpe?g|png|gif)$/, 
    loaders: ["file"] 
},
{ 
    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" 
},

下面是一个链接，它解释了与我所说的相同的情况：

---

ps:别忘了

npm安装文件加载器

和

npm安装url加载器

很好地了解这一点，对于与模块加载器相关的网页包错误通常可能会有所帮助。谢谢