webpack引入font-awesome出错误,提示eot字体类型出错。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wangchunbo007/article/details/79217022

问题:webpack引入font-awesome出错误,log中的woff、ttf、svg格式的字体都没出错,只有eot出错了。
解决:url-loader中相关eot字体忘了配置了。

命令行的错误记录:

 extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/font-awesome/css/font-awesome.min.css:
     4 assets
       [0] ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.min.css 33.4 kB {0} [built]
       [1] ./node_modules/css-loader/lib/url/escape.js 448 bytes {0} [built]
       [2] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]

//注意这里eot
       [3] ./node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 177 bytes {0} [built] [failed] [1 error]
//注意这里eot       
       [4] ./node_modules/font-awesome/fonts/fontawesome-webfont.eot 177 bytes {0} [built] [failed] [1 error]
//其他的woff、ttf、svg格式的字体都没出错 
       [5] ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 82 bytes {0} [built]
       [6] ./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 81 bytes {0} [built]
       [7] ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 80 bytes {0} [built]
       [8] ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 80 bytes {0} [built]

//eot出错了,是因为没有配置
    ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
    Module parse failed: Unexpected character '�' (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.min.css 7:250-301

    ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.eot
    Module parse failed: Unexpected character '�' (1:1)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.min.css 7:327-370
webpack: Failed to compile.

webpack-config配置中不要忘了eot字体!

    module: {
        loaders: [{
            test: /\.css$/,
            // loader: "style-loader!css-loader"
            // loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader']
            })
        }, {
            _comment: "注意这里!!!!不要忘了eot字体",
            test: /\.(gif|png|jpg|woff|svg|ttf|eot)\??.*$/,
            // loader: "style-loader!css-loader"
            // loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            loader: {
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: './resource/[name].[ext]'
                }
            }
            // loader: 'url-loader?limit=8192&name=[name].[ext]'
        }]
    },

没有更多推荐了,返回首页