Question

我有一个React应用，并使用webpack作为模块捆绑器。我正在使用模块react-widgets来表示某些输入字段。 react-widgets附带默认的css react-widgets.css，我希望将其包含在我使用的组件中

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

在css文件中，有fonts

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

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

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

使用webpack

1 个答案: