webpack - 使用 webpack 时无法找到导入模块的字体文件

Question

我有一个 React 应用程序，我使用 webpack 作为模块打包器。我正在为某些输入字段使用模块 react-widgets。 react-widgets 附带默认的 css react-widgets.css 我想将其包含在我使用的组件中

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

在 css 文件中，存在对 react-widgets/dist 下的 fonts 文件夹中的字体文件的引用

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

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

下面是我的webpack加载器配置

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 文件的位置。

请告诉我如何解决这个问题？

Answer 1

我在 react-widgets 中遇到了同样的错误，发现这个正则表达式:

/\.(png|woff|woff2|eot|ttf|svg)$/

与 webpack 尝试加载的文件名不匹配:

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" 
},

这是解释与我所说相同的链接:https://www.npmjs.com/package/react-widgets-webpack

ps:不要忘记npm install file-loader 和npm install url-loader