Webpack 与 Vite 构建工具中 hash 与 contenthash 的区别与应用

当某个入口文件（chunk）内容变化时，只更新该 chunk 的文件。但它仍可能受到其他依赖的影响（尤其是公共模块）。

💡 在使用 MiniCssExtractPlugin 抽离 CSS 时，CSS 改动会影响 JS 的 chunkhash，因此后期不常用。

3. [contenthash]：内容级哈希（推荐）

output: {
  filename: "bundle.[contenthash].js"
}

它根据文件自身内容生成哈希值。只要文件内容不变，文件名就保持稳定。

这也是现代前端构建中最常用、最推荐的方案。

三、在 Vite 中的哈希策略

Vite 没有 [hash]、[contenthash] 这样的占位符语法，但它的行为与 Webpack 的 [contenthash] 等价。

默认规则

Vite 的生产构建（vite build）输出目录通常是：

dist/
├─ assets/
│  ├─ index-BkR8kM3.js
│  ├─ index-BkR8kM3.css
│  └─ logo-CyT9y0D.png

这些 BkR8kM3、CyT9y0D 就是基于文件内容计算的 hash 值。当文件内容未变化时，hash 不会改变。

自定义命名规则

在 vite.config.js 中可以使用占位符控制输出格式：

export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash][extname]"
      }
    }
  }
};

这里的 [hash] 实际等价于 Webpack 的 [contenthash]，它同样是根据内容变化生成的稳定哈希。

💡 在 Vite 中并没有全局 [hash] 或 [chunkhash]，所有 [hash] 都是基于内容的（即 content-based hash）。

四、两者的核心区别总结

五、使用场景推荐

六、实战示例

✅ Webpack 生产配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  output: {
    filename: "js/[name].[contenthash].js",
    clean: true
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css"
    })
  ]
};

✅ Vite 生产配置

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash][extname]"
      }
    }
  }
};

两者最终行为一致：只要文件内容不变，hash 不会变化，浏览器缓存就能命中。

七、最佳实践总结