webpack打包字体图标出错

Question

项目中用到字体图标，使用webpack打包后页面不显示，控制台有警告：

Failed to decode downloaded font: http://localhost/fonts/fontawesome-webfont.woff2
user:1 OTS parsing error: invalid version tag
user:1 Failed to decode downloaded font: http://localhost/fonts/fontawesome-webfont.woff
user:1 OTS parsing error: invalid version tag
user:1 Failed to decode downloaded font: http://localhost/fonts/fontawesome-webfont.ttf
user:1 OTS parsing error: invalid version tag

看提示可能时loader的问题吧？，但是我再webpack.config.js的loader有配置：
{

//文件加载器，处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'

}
对了，说一下，我要使用的字体图标是font-awesome，
我时这样引的，帮忙看看有没有错：
require("../../WebRoot/css/font-awesome.min.css");
require("../../WebRoot/fonts/fontawesome-webfont.woff");
require("../../WebRoot/fonts/fontawesome-webfont.ttf");
require("../../WebRoot/fonts/fontawesome-webfont.woff2");
require("../../WebRoot/fonts/fontawesome-webfont.eot");
require("../../WebRoot/fonts/fontawesome-webfont.svg");
因为试了很多次都不行，我就把能引的都引上了~~
求指教~

Answer 1

遇到过这个问题，浪费了很多时间找原因。我这边的原因是在webpack.config.js中写了两个一样file-loader，删掉其中一个就好了，希望对你有所帮助。

Answer 2

不用require("../../")等等 file-loader 安装了没？ npm install --save-dev file-loader

Answer 3

如果这样的话，你就不用这么引用了，直接在index.html里面用link的方式引用就可以了，主要的是你的文件要放到static文件夹下面，否则在打包的时候可能会出现找不到文件的问题

Answer 4

楼主解决了吗!

Answer 5

http://stackoverflow.com/ques...