webpack TTF加载器未加载字体

编程问答 2022-08-10

问题描述

这是我的代码：

{
      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",{
    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,.5)!important}.text-white-50{color:rgba(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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fontsjavascriptreactjsreactjswebpackwebpackwebpack