Why does webpack create strange font files?

Question

Everytime I run webpack it seems to output a new set of font files. They're always named for a long string of random characters like a hash. For example,

76a4f23cb373829c9382900d9dfs9830sdf.svg

There are .eot, .woff, .woff2 etc files.

The problem is the files accumulate in github everytime we generate a new package. Is there some way to force webpack to use specific names for these files?

You might want to consider .gitignore-ing your build files. — Alexander O'Mara
But those files are necessary. Not including them results in missing fonts. — Jay Boy

dreyescat dreyescat · Accepted Answer · 2016-01-09T10:20:23

Yes, you are right. It is a hash.

By default the filename resulting from loading the font file with file-loader is the MD5 hash of the file's contents with the original extension of the required resource.

If you want, you can configure a custom filename template for your file using the query parameter name. You can specify to keep the same path, name and extension using the following template in your fonts loader rule:

'file-loader?name=[path][name].[ext]'

For example, if you want to apply this template to the svg files:

loader: [
  { test: /.svg$/, loader: 'file-loader?name=[path][name].[ext]' }
]

Modify the test field accordingly to match all your fonts.

Why does webpack create strange font files?

1 Answers