Is it possible to remove special characters from file names in webpack?

Question

In short, I cannot have characters such as hyphens in asset file names. I won’t be able to figure out the documentation in webpack to find out if it is possible to rename the file with a regular expression or something similar so that I can cross out any hyphens from third-party packages where I do not control the original file name.

My super naive example would be something like this:

{ test: /\.(ttf|eot|woff|woff2)$/, loader: `url-loader?limit=${ASSETS_LIMIT}&name=fonts/[name.replace(/-/)].[ext]` } 

Does anyone know if this is possible or how it fits this requirement? Thanks!

Answer 1

The answer to this puzzle can be found in the customInterpolateName loader option. With webpack@v3.4.1 below was my end result for hyphen removal.

It was a key tidbit:

 plugins: [ // ... other plugins ... new webpack.LoaderOptionsPlugin({ options: { customInterpolateName: (loaderContext) => { return loaderContext.replace(/-/g, ''); } } }) ] 

Here is a more complete example to give some context (note: .css was added to the font names intentionally as a workaround for another restriction of the web resource name in Dynamics CRM):

 module.exports = { // ... other config ... module: { loaders: [ // ... other loaders ... { test: /\.(ttf|eot|woff|woff2)$/, loader: `url-loader?limit=${ASSETS_LIMIT}&name=fonts/[name].[ext].css` } ] }, plugins: [ // ... other plugins ... new webpack.LoaderOptionsPlugin({ options: { customInterpolateName: (loaderContext) => { return loaderContext.replace(/-/g, ''); } } }) ] };