Webpack 5 assetModuleFilename avoid illegal characters in filename

Question

Is there a way to avoid/scape illegal chars as "çãáéó" and white spaces in filenames using type: 'asset' and assetModuleFilename: 'images/[name][ext] ?

[...]
    output: {
    [...]
        assetModuleFilename: 'images/[name][ext][query]',  // name NOT hash etc..
    },
    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
     [...]

score 1 · Answer 1 · answered Jul 29 '21 at 19:59

Got it, if someone is interested, this may help SEO of files. This sanitize the filename to avoid white spaces and latin characters. I don't know if this is a 'fancy' way to do it, but it works! (I'm open to improvements):

    [...]
    output: {
            [...]
            assetModuleFilename(module) { //Instead of using as a object we use as a function
                module.filename = module.filename.normalize("NFD").replace(/[\s]/g, "_").replace(/[\u0300-\u036f]/g, ""); // Thanks to https://stackoverflow.com/a/37511463/3955955
                return 'images/[name][ext]'; // I'm not sure why we don't need a dot here
            },

    }
    [...]

Take a note that this is using Webpack 5.

Webpack 5 assetModuleFilename avoid illegal characters in filename

1 Answers1