Symfony项目Webpack Encore开启enableVersioning后本地编译资源重复如何解决

问题原因 #

你遇到的重复文件问题是三个配置逻辑共同导致的：

• 全环境开启.enableVersioning()，dev环境下代码每次修改都会生成新的哈希后缀，导致文件名变更
• 默认的.cleanupOutputBeforeBuild()在watch增量编译模式下不会自动清理旧的带哈希资源
• copyFiles配置中静态资源固定带哈希后缀，修改资源时也会生成新文件

解决方案 #

步骤1：区分环境开启版本号 #

本地开发环境无需开启资源版本号，仅生产环境开启即可，将原有.enableVersioning()修改为：

.enableVersioning(Encore.isProduction())

步骤2：调整静态资源复制规则 #

修改图片类资源的复制配置，仅生产环境带哈希后缀：

.copyFiles({
     from: './assets/images/',
     to: Encore.isProduction() ? '[path][name].[hash:8].[ext]' : '[path][name].[ext]',
     context: './assets'
})

步骤3：配置监听模式下自动清理旧资源 #

如果确实需要在dev环境开启版本号，可以在导出webpack配置前追加清理配置，让每次增量编译都自动清理旧资源：

// 原有Encore配置不变
const config = Encore.getWebpackConfig();
// 开启webpack原生的输出目录清理能力，兼容watch模式
config.clean = true;
module.exports = config;

验证方法 #

配置修改完成后，先手动删除public/build目录下的所有旧文件，再重新运行yarn encore dev --watch即可，后续修改资源时不会再生成重复的带哈希文件。

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