Quasar项目使用webpack-assets-manifest时文件版本化异常

问题描述 #

在Quasar项目中配置webpack-assets-manifest实现静态文件版本化，期望每次构建生成带唯一哈希的文件名以规避缓存问题，但实际情况是首次构建生成带哈希的文件后，后续重复构建的哈希完全一致，版本化功能失效。当前简化配置如下：

build: {
  // ...

  extendWebpack(cfg) {
    // ...
    cfg.plugins.push(
      new WebpackAssetsManifest({
        // options
      })
    );
  }
}

核心解决步骤 #

1. 强制开启Quasar文件名哈希

Quasar生产构建默认启用文件名哈希，但如果手动修改过配置，需在quasar.conf.js的build区块中明确声明：

build: {
  filenameHashing: true, // 确保文件名哈希功能开启
  // ... 其他配置
}

2. 完善webpack-assets-manifest插件配置

插件需明确开启哈希生成逻辑，并配置基于文件内容的哈希规则，替换原插件实例：

new WebpackAssetsManifest({
  filename: 'asset-manifest.json',
  hash: true,
  contenthash: true, // 基于文件内容生成哈希，仅当文件变更时更新
  entrypoints: true, // 记录入口文件映射关系
  customize: (entry) => {
    // 自定义文件名格式为 [name].[contenthash].[ext]
    const ext = entry.path.split('.').pop();
    entry.path = `${entry.name}.${entry.hash}.${ext}`;
    return entry;
  }
})

3. 清理构建缓存

webpack或Quasar的编译缓存会导致复用旧哈希，每次构建前强制清理：

• 在package.json的scripts中添加组合命令：

  "scripts": {
    "build": "quasar clean && quasar build"
  }
  

• 或手动删除项目根目录下的.quasar/cache和dist文件夹

4. 锁定webpack输出规则

在extendWebpack中强制设置输出文件名的哈希规则，确保webpack本身生成带内容哈希的文件：

extendWebpack(cfg) {
  // ...
  cfg.output.filename = '[name].[contenthash:8].js';
  cfg.output.chunkFilename = '[id].[contenthash:8].js';
  cfg.output.assetModuleFilename = '[name].[contenthash:8][ext]';
  // ... 插件配置
}

关键注意点 #

• 优先使用contenthash：它基于单个文件内容生成，仅当文件代码变更时哈希才会更新，比全局hash（整个构建的统一哈希）更精准
• 避免缓存干扰：每次构建前清理缓存是确保哈希更新的必要步骤，否则webpack可能复用旧编译结果

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