Webpack无法加载字体文件:Unexpected Token

Ang*_*ela 47 css fonts webpack

我有一个使用字体文件的style.css文件,我在使用Webpack加载字体文件时遇到问题.这是我的加载程序配置:

    loaders    : [
        {
            test    : /\.(js|jsx)$/,
            exclude : /node_modules/,
            loader  : 'react-hot!babel-loader'
        }, {
            test   : /\.styl/,
            loader : 'style-loader!css-loader!stylus-loader'
        }, {
            test   : /\.css$/,
            loader : 'style-loader!css-loader'
        }, {
            test   : /\.(png|jpg)$/,
            loader : 'url-loader?limit=8192'
        }, {
            test   : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
            loader : 'file-loader'
        }
        /*}, {
         test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader : 'url-loader?limit=10000&minetype=application/font-woff'*/
    ]
Run Code Online (Sandbox Code Playgroud)

我收到的错误是

ERROR in ./src/fonts/icon/fonts/mf-font.woff?lt4gtt
Module parse failed: /PATH/src/fonts/icon/fonts/mf-font.woff?lt4gtt Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./src/fonts/icon/style.css 2:293-331
Run Code Online (Sandbox Code Playgroud)

在我看来,Webpack将它作为CSS文件而不是它.但我很确定测试表达式会传递给字体文件

nil*_*ils 65

测试表达式中的正则表达式有一个小错误.woff(2)意味着它总是在一个单独的组中查找woff2并捕获它2.如果你?在它之后添加一个,webpack也应该能够识别woff:

test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
Run Code Online (Sandbox Code Playgroud)

如果有效,请告诉我.

  • 它没有.你也可以写`/ \.(TTF | EOT | SVG | woff2?)(\ [A-Z0-9] +?)$ /`或使用非捕获组`/ \(TTF |?EOT | SVG | WOFF:)(\ [A-Z0-9] +)$ /`(2θ)????.为了清楚起见,我刚刚离开了小组(因为`woff2?`可能被误读为全部或全部匹配). (3认同)