Is it possible to strip special characters from filenames in webpack?

Question

Long story short, I cannot have certain characters like hyphens in our asset filenames. I'm not having the best of luck parsing through webpack documentation to figure out if it is possible to rename a file using a regex or something similar so I can strip out any hyphens from 3rd party packages where I do not control the source filename.

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 one would approach this requirement? Thanks!


Show source
| javascript   | webpack   | dynamics-crm   2017-08-08 23:08 1 Answers

Answers to Is it possible to strip special characters from filenames in webpack? ( 1 )

  1. 2017-08-09 17:08

    The answer to this riddle appears to be found in the customInterpolateName loader option. With webpack@v3.4.1 the below was my end result for removing a hyphen.

    This was the key tidbit:

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

    Here's a more complete example to give some context (note: the .css was appended to the font filenames intentionally as a workaround for yet another web resource name restriction 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, '');
                    }
                }
            })
        ]
    };
    

Leave a reply to - Is it possible to strip special characters from filenames in webpack?

◀ Go back