文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何用reactJS在webpack中编写字体规则？

问如何用reactJS在webpack中编写字体规则？
EN

Stack Overflow用户
提问于 2017-07-22 17:12:26
回答 2查看 286关注 0票数 0

当我尝试与webpack开始我的react项目时，我遇到了错误。我想我已经在我的webpack中涵盖了字体规则，但当我试图运行应用程序时，我得到了一个错误。我是新来的反应和webpack。

这是我的webpack配置：

代码语言：javascript
复制
var config = {
  entry:'./src/index.js',
  output:{
    path:'./',
    filename:'driven.js'
  },
  module:{
    loaders: [
      {
     test: /\.jsx?$/,
     loader: 'babel',
     exclude: /node_modules/,
     query: {
       presets: ['react', 'es2015', 'stage-1']
     }
   },
   {
     test: /\.css$/,
     loaders: ['style', 'css']
   },
   {
     test: /\.png$/,
     loader: "url-loader?limit=100000"
   },
   {
     test: /\.jpg$/,
     loader: "file-loader"
   },
   {
     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
     loader: 'url?limit=10000&mimetype=application/font-woff'
   },
   {
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
     loader: 'url?limit=10000&mimetype=application/octet-stream'
   },
   {
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
     loader: 'file'
   },
   {
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
     loader: 'url?limit=10000&mimetype=image/svg+xml'
   },
   {
     test: /\.gif$/i,
     loaders: [
       'file?hash=sha512&digest=hex&name=[hash].[ext]',
       'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
     ]
   },
   {
     test: /\.json?$/,
     loader: 'json'
   }
    ]

    }
  }

module.exports = config;

下面是我得到的错误：

代码语言：javascript
复制
ERROR in ./src/common_assets/css/fonts/icomoon.eot?uwh3dg
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\icomoon.eot?uwh3dg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.parse (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:515:10)
    at Object.parse (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (D:\jasmel\react\lp\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (D:\jasmel\react\lp\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (D:\jasmel\react\lp\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (D:\jasmel\react\lp\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:6028-6065 6:6088-6125

ERROR in ./src/common_assets/css/fonts/icomoon.ttf?uwh3dg
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\icomoon.ttf?uwh3dg Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:0)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.parse (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:515:10)
    at Object.parse (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (D:\jasmel\react\lp\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (D:\jasmel\react\lp\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (D:\jasmel\react\lp\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (D:\jasmel\react\lp\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:6174-6211

ERROR in ./src/common_assets/css/fonts/SFUIDisplay-Light.otf
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\SFUIDisplay-Light.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:4)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:1414-1454

ERROR in ./src/common_assets/css/fonts/SFUIDisplay-Semibold.otf
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\SFUIDisplay-Semibold.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:4)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:1987-2030

ERROR in ./src/common_assets/css/fonts/SFUIDisplay-Regular.otf
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\SFUIDisplay-Regular.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:4)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:1697-1739

ERROR in ./src/common_assets/css/fonts/SFUIDisplay-Medium.otf
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\SFUIDisplay-Medium.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:4)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:2278-2319

ERROR in ./src/common_assets/css/fonts/icomoon.woff?uwh3dg
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\icomoon.woff?uwh3dg Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:4)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:6245-6283

ERROR in ./src/common_assets/css/fonts/icomoon.svg?uwh3dg
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\icomoon.svg?uwh3dg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseStatement (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:6313-6350

ERROR in ./src/common_assets/css/fonts/SFUIDisplay-Bold.otf
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\fonts\SFUIDisplay-Bold.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character ' ' (1:4)
    at Parser.pp$4.raise (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\jasmel\react\lp\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./src/common_assets/css/style.css 6:2561-2600
webpack: Failed to compile.
reactjs
webpack
EN

回答 2

Stack Overflow用户

发布于 2017-07-22 17:36:48

答案很简单：

您的正则表达式测试/\.eot(\?v=\d+\.\d+\.\d+)?$/与您的文件名icomoon.eot?uwh3dg不匹配，这就是为什么webpack不知道在此文件上应用哪个加载器的原因

要解决此问题，请编写一个正则表达式，使其与您的文件名匹配，或保留您的文件名，使其与您的正则表达式匹配。为了测试您的正则表达式，您可以使用此站点regex101

票数 0
EN

Stack Overflow用户

发布于 2017-07-22 17:41:05

由于最后传递的参数?v=4.4.0，文件加载器与字体url不匹配。

我使用下面的代码来捕获任何传递的参数，请注意(?.*$|$)而不是普通的$

代码语言：javascript
复制
test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

这适用于所有类型，例如，您可以对单独的规则进行相同的分隔

对于.eot文件，您可以编写

代码语言：javascript
复制
test: /\.eot(\?.*$|$)/,

希望这能帮助到其他人

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45252769

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档