为什么模块解析失败：/xxx/MyFont.ttf Unexpected character ''

Question

我遇到了这个错误

./src/style/MyFont.ttf 中的错误模块解析失败：/xxx/MyFont.ttf 意外字符 '' (1:0) 您可能需要适当的加载程序来 处理这种文件类型。 （此二进制文件省略了源代码）` 当我像这样在我的less文件中导入我的自定义字体时：

@font-face {
    font-family: "MyFont";
    src: url("./MyFont.ttf") format("truetype"); 
}

我的 webpack 配置如下：

rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: babelQuery
  },{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/i,
    use: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
  },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
]

有人知道怎么解决吗？

Answer 1

将此添加到您的 rules 数组中。

{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

您应该使用npm install 安装file-loader。 希望这会对你有所帮助。