无法找到导入模块的字体文件，而使用的WebPack

我有一个React应用程序，并正在使用webpack作为模块捆绑。我对某些输入字段使用模块react-widgets。 react-widgets附带一个默认的CSS react-widgets.css，我想在我的组件包括我没有使用无法找到导入模块的字体文件，而使用的WebPack

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

请让我知道我怎么能解决这个问题？

来源

2016-01-20 Varun Gupta

我react-widgets面临着同样的错误，发现这个正则表达式：

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

dodn't匹配文件名是的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

来源

2016-09-02 15:46:27

好知道并很可能会与到模块加载器相关的WebPack错误一般很有帮助。谢谢！ –

无法找到导入模块的字体文件，而使用的WebPack

回答

相关问题