Question

当我尝试使用webpack启动我的反应项目时出错。我想我已经涵盖了我的webpack中的字体规则，但是当我尝试运行应用程序时出现错误。我很反应和webpack。

这是我的webpack配置：

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;

这是我得到的错误：

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.

Answer 1

答案很简单：

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

修复此问题，编写一个正则表达式，使其与您的文件名匹配或保留您的文件名，使其与您的正则表达式匹配。要测试您的Regex，您可以使用此网站regex101

Answer 2

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

我使用以下内容来捕获任何传递的参数，注意（？。* $ | $）而不是普通的$

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

这适用于所有类型，您可以为单独的规则分隔相同的内容，例如

可以写 .eot 文件

test: /\.eot(\?.*$|$)/,

希望这会有助于其他人

如何使用reactJS在webpack中为字体编写规则？

2 个答案: