Javascript 与网页包绑定时，浏览器中不会显示TTF字体

我正在尝试将静态网页与webpack绑定。npm运行构建在所有javascript、sass、字体和图像资产都被压缩并发送到dist文件的情况下运行良好。问题是浏览器不显示我的字体。这就是我的网页包配置文件的样子

module.exports = {
  entry: './public/app.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.(scss)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/images'
          } 
        }
      ]
    },
       {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/fonts'
          } 
        }
        ]
      }
    ]
  }
}

我试过使用字体加载器，我试过使用url加载器，我试过使用专门用于ttf的加载器，即ttf加载器。我在上面引用的代码上尝试了各种排列，我尝试将sourceMap=true添加到sass加载程序中。我尝试过将我的字体转换成其他格式，但没有成功

我的猜测是，我在Sass文件中导入字体的方式有问题，因为在构建时表面上没有什么问题

@font-face {
  font-family: "Oswald-Light";
  src: url("../assets/fonts/Oswald-Light.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Oswald-Regular";
  src: url("../assets/fonts/Oswald-Regular.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Regular.ttf") format("truetype"),
       url("../assets/fonts/Lato-Regular.ttf") format("truetype");
}

---

上面的代码有没有明显的错误

＞P>对于在未来挣扎的其他人——看到一些类似的问题，考虑使用谷歌字体，只需在头上插入链接标签。

<link href="https://fonts.googleapis.com/css?family=Lato|Oswald&display=swap" rel="stylesheet"> 

---

如果不设置一个网页包环境来测试您的代码，很难判断。将你的代码与网页文档进行比较，我看不出有什么不对。我知道这就是为什么它如此令人沮丧。不过，我现在有一项工作要做。尽管投了反对票，但这项工作实际上是有效的，而且可以节省增加网页包大小和本地字体文件大小的费用。