webpack中加载fontawesome.css报错

Question

require('../node_modules/font-awesome/css/font-awesome.min.css')

报错入下

Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.

它这里说有非法的字符需要某个loader去解决这个问题

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

是不是无法辨别版本号参数后缀（?v=4.5.0）的原因呢？需要怎样解决这个问题。

Answer 1

url-loader没有配置对, 你需要把那些字体的后缀也加到url-loader的配置里面。

检查一下你webpack里面对url-loader的配置。
下面我正在用的配置。

  module: {
    noParse: [],
    loaders: [
      { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
    ]
  },

注意：大余50KB的文件不会被打包进js里面，会直接输出到output目录。

Answer 2

我也遇到楼主的问题，后来是手动把（?v=4.5.0）这些后缀注释删掉就解决了，直接用这个

{
test: /\.(svg|ttf|eot|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
  },