javascript - webpack TTF 加载器未加载字体

问题描述

这是我的代码：

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

并尝试过，

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

仍然会出现这个问题：

./src/client/assets/fonts/blacky.TTF 中的错误 1:0 模块解析失败：意外字符 '' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理这个文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码）@ ./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

我的目标是将我的 react 应用程序转换为 firebase 的 ssr 应用程序。

整个配置文件::

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

标签： javascriptnode.jsreactjswebpackfonts

解决方案

有点晚了，但对于任何面临这个问题的人来说仍然值得一提。我也花了一些时间在这个话题上，并尝试了许多不同的事情。当我在不同的论坛上看到所有这些启发性的讨论时，我可以想象许多新程序员都在为这个话题而苦苦挣扎。最后，我找到了一个对我有用的解决方案。我希望它也对你有用。

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

// 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;
        }    
`;

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

同时，我的项目的字体文件夹结构中有大量字体，并且可以正常工作。我希望这可以解决您的问题并节省您和其他人的时间。

javascript - webpack TTF 加载器未加载字体

问题描述

解决方案

推荐阅读