网页包TTF加载程序未加载字体

Question

这是我的密码：

{
      test: /\.ttf$/,
      use: [
        {
          loader: 'ttf-loader',
          options: {
            name: './font/[hash].[ext]',
          },
        },
      ]
  }

并与，

 {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
      'file-loader',
    ],
  },
]
 },

仍然给出了这个问题：

错误。/src/客户端/资产/字体/黑色。TTF 1:0模块解析失败：意外字符”（1:0）您可能需要一个适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参见https://webpack.js.org/concepts#loaders（此二进制文件省略了源代码）@./src/Client/page/Home/Homepage.module.scss（./node_modules/css-loader/dist/cjs.js！./node_modules/sass-loader/dist/cjs.js！./src/Client/page/首页/Homepage.module.scss）4:36-76@./node_modules/Style-loader/dist/cjs.js！./node_modules/css-loader/dist/cjs.js！./node_modules/sass-loader/dist/cjs.js！./src/Client/page/Home/Homepage.module.scss

我的目标是将我的反应应用程序转换成一个ssr应用程序的Firebase。

整个配置文件：：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins:
 [
   new MiniCssExtractPlugin({
     filename:"[name].css",
    chunkFilename:"[id].css"}),
  ],
 entry: {
  "app": "./src/client/index.js",
 },
 module: {
  rules: [
       {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
        exclude: /node_modules/,
      },
   {
    test: /\.js$/,
    loader: "babel-loader",
    exclude: /node_modules/,
   },
      {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
  },
  {
    test: /\.ttf$/,
    use: [
      {
        loader: 'ttf-loader',
        options: {
          name: './font/[hash].[ext]',
        },
      },
    ]
}
]
 },
 output: {
  path: __dirname+"/functions/Views/public",
  filename: "bundle.js",
 },
}

（其他问题没有提到，但仍然存在/cmd错误日志更多）

r{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}
| /*# sourceMappingURL=bootstrap.min.css.map */
 @ ./src/client/pages/Header/navbar.js 15:0-46
 @ ./src/client/pages/Header/Header.js
 @ ./src/client/pages/about.js
 @ ./src/client/App.js
 @ ./src/client/index.js
Child mini-css-extract-plugin node_modules/style-loader/dist/cjs.js!node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/client/pages/Home/Homepage.module.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss 1.04 KiB {0} [built]
    [2] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss 404 bytes {0} [built]
    [5] ./src/client/assets/fonts/blacky.TTF 284 bytes {0} [built] [failed] [1 error]
        + 3 hidden modules

    ERROR in ./src/client/assets/fonts/blacky.TTF 1:0
    Module parse failed: Unexpected character '' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./src/client/pages/Home/Homepage.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss) 4:36-76
     @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! AllianceCareLTD@0.2.0 webpack: `webpack-cli --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the AllianceCareLTD@0.2.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-10-15T13_04_02_184Z-debug.log

Answer 1

虽然有点晚了，但对任何面临这个问题的人来说仍然值得一提。我也花了一些时间研究这个话题，尝试了很多不同的东西。当我在不同的论坛上看到这些充满灵感的讨论时，我可以想象许多新的程序员都在为这个话题而挣扎。最后我找到了一个对我有效的解决办法。我希望它对你也有用。

首先，我使用字体的输出路径。它将复制字体文件，并根据我们使用outputPath指定的内容将它们放入“dist”文件夹中的任何目录中，例如一个名为“fonts”的路径。这是在您的样式文件中正确引用我们的字体所必需的；例如，scss或。js，如果您使用样式化组件并创建“createGlobalStyle”。它还定义了输出内容的相对路径，这些路径将作为每个url请求的前缀。在我的例子中，我使用“字体/”。示例：如果我实现字体系列yxz。woff，前端用户的路径将是localhost:3000/fonts/yxz。就我的情况而言，沃夫。它与我的项目中真正的文件夹结构无关（见下一段）。

// Webpack setting
{
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },

字体为yxz。woff直接放在根目录的“我的公用文件夹”中。也可以使用任何其他位置（例如src/styles/fonts/yxz.woff）并在我的情况下工作。为你的项目找出答案。

在下一步中，我用一个带有样式组件的. js文件定义并加载yxz字体。但是scss也适用于我的情况。这里很重要！您必须分别导入每个源（woff、woff2、ttf），并给它一个唯一的名称。看下面的例子

import { createGlobalStyle } from "styled-components";
import yxzWoff2 from "../../../public/yxz.woff2";
import yxzWoff from "../../../public/yxz.woff";

export default createGlobalStyle`
    @font-face {
          font-family: 'yxz';
          src:  local('yxzWoff2'),
          url("fonts/yxz.woff2") format('woff2');
          src:  local('yxzWoff'),
          url("fonts/yxz.woff") format('woff');  
          font-weight: normal;
          font-style: normal;
          font-display: auto;
        }    
`;

如您所见，我使用的路径与通过outputPath在webpack中定义的路径相同。它仍然直接放在公用文件夹中。当然，您也可以将上述原则应用于ttf。然而，在我的例子中，我主要使用woff和woff2。

同时，在我的项目中的fonts文件夹结构中，我有一个相当大的字体集合，它可以工作。我希望这能解决你的问题，节省你和其他人的时间。