Webpack 无法加载字体文件:Unexpected Token
Posted
技术标签:
【中文标题】Webpack 无法加载字体文件:Unexpected Token【英文标题】:Webpack can not load font file: Unexpected Token 【发布时间】:2015-09-19 17:55:15 【问题描述】:我有一个使用字体文件的 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'*/
]
我收到的错误是
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
在我看来,Webpack 将其视为 CSS 文件,但实际上并非如此。但我很确定字体文件的测试表达式通过了
【问题讨论】:
【参考方案1】:您的测试表达式中的正则表达式有一个小错误。 woff(2)
意味着它总是寻找 woff2
并且只是在一个单独的组中捕获 2
。如果你在后面加上?
,webpack 应该也能识别woff
:
test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
请让我知道这是否有效。
【讨论】:
不敢相信这是一个愚蠢的错误,谢谢 为什么 webpack 要在单独的组中捕获 2? 它没有。您也可以写/\.(ttf|eot|svg|woff2?)(\?[a-z0-9]+)?$/
或使用非捕获组/\.(ttf|eot|svg|woff(?:2)?)(\?[a-z0-9]+)?$/
。为了清楚起见,我只是离开了小组(因为woff2?
可能被误读为匹配全部或全部不匹配)。【参考方案2】:
这对我有用:
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" ,
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" ,
【讨论】:
以上是关于Webpack 无法加载字体文件:Unexpected Token的主要内容,如果未能解决你的问题,请参考以下文章