Loading of fonts

[kujtimiihoxha]

I suggest to change

 {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=fonts/[name].[hash].[ext]?'}

to

{test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=fonts/[name].[hash].[ext]?'}

This was needed for example to load font-awesome.

[Foxandxss]

I would love a reproduction to see what is going on. But sounds good to me.

[kujtimiihoxha]

If I don't add

?(\?v=[0-9]\.[0-9]\.[0-9])?

I get the following errorr when I try to import font-awsome.min.css

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: C:\Users\Kujtim\Desktop\angular2-webpack\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)

There are similar errors for all files with ?v=x.x.x

I think that the problem is this

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

The loader has problems to get

../fonts/fontawesome-webfont.eot?v=4.6.3

But I just found out that other fonts ex. ionicons has a different style of versioning,they use

3.0.0-alpha.3 

And the loader does not load this either.

So the better solution which worked for me would be to change it to

      {test: /\.png|\.jpe?g|\.gif|\.svg|\.woff|\.woff2|\.ttf|\.eot|\.ico|\.svg$/, loader: 'file?name=fonts/[name].[hash].[ext]?'},

This will ignore the version number.

[kartsims]

@kujtimiihoxha Thanks for the solution proposal

There is actually one unnecessary question mark (that could cause other issues), you could use

/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/

instead of

/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)?(\?v=[0-9]\.[0-9]\.[0-9])?$/

The question mark makes the extension optional, which is not what we want

[kujtimiihoxha]

@kartsims Is there a posibility that some fonts are not versioned ? If there are fonts that are not versioned than we should leave it optional.

[kartsims]

The first question mark doesn't make the version optional, but the extension. The second question mark remains to make the version optional.

In a regexp the question mark makes the preceding character/expression optional see this website for instance

Works fine for me without the first one

[kujtimiihoxha]

Great than I hope this solution solves other users issues.