ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Module parse fai

原创于 2017-02-02 10:51:15 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

前端框架专栏收录该内容

2 篇文章

订阅专栏

这篇博客主要讨论了在webpack配置过程中遇到的一个错误，即ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot模块解析失败。原因是缺少处理.eot字体文件的loader。解决方案包括安装file-loader和url-loader，并在webpack配置文件中添加相应的加载规则。

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

原因：编译器尝试加载.eot font file,但是不知道怎么做，因为你没有适合loader

解决方法：

1、npm install file-loader url-loader -D

2、在webpack.config.js中添加下面的加载器

       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"
        }