Webpack 5 assetModuleFilename避免filename中的非法字符

Question

是否有办法避免/escape非法字符为"çãáéó"在文件名中使用类型:'asset'和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
}
}
},
[...]

Answer 1

明白了，如果有人感兴趣，这可能有助于文件的SEO。这将清理文件名以避免空格和拉丁字符。我不知道这是不是一种"花哨"的方法，但它确实有效!(我愿意改进):

[...]
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
},
}
[...]

请注意这里使用的是Webpack 5。