如何在自研Webpack5图片loader插件中为Asset Modules文件命名创建自定义占位符？

结论 #

你提出的在Webpack 5原生asset模块的generator.filename配置中新增自定义占位符的需求目前确实无法通过官方原生能力实现。

原因说明 #

Webpack 5 内置的asset模块占位符解析逻辑是固化在核心代码中的，仅支持官方预设的[name]、[contenthash]、[ext]等固定占位符，并未提供面向自定义loader的占位符扩展公开API。你需要的[width]、[height]、[newext]这类参数需要等loader处理完图片资源后才能拿到，无法直接注入到原生asset模块的文件名生成流程中。

可行替代方案 #

• 放弃使用原生generator.filename配置，在你的自研loader内部处理完图片、拿到宽高、新后缀等参数后，直接调用loader上下文的this.emitFile方法，自行实现占位符解析逻辑、拼接最终文件名输出，完全可以实现你要的自定义占位符效果。
• 若要保留和原生配置类似的使用体验，你可以在loader的option参数中新增自定义的filename配置项，让用户把带自定义占位符的模板传到loader参数中，你在loader内部完成模板替换即可。
• 也可以在loader处理流程中修改当前模块的assetInfo.filename属性，直接覆盖原生asset模块生成的文件名，同样能达到自定义输出路径的效果。

补充说明 #

你在GitHub提交的功能请求被驳回，属于Webpack核心团队的常规设计取舍：官方更倾向于保持核心模块的精简性，这类业务相关的自定义扩展能力，官方希望由生态内的loader、plugin自行实现，不纳入核心功能范围。

内容的提问来源于stack exchange，提问作者szegheo