关于webpack的文件打包分割，并防止js文件缓存

wh201412122025-03-11 18:16

在使用Webpack打包项目时，需要在打包的文件中更新版本号，以便于版本管理和防止缓存。

可以通配置output方式实现，包括使用 $contenthash$ 或 $hash$ 占位符在输出文件名中生成基于内容变化的哈希值。

实现原理：

Webpack允许你在输出文件的名称中使用 $contenthash$ 或者 $hash$ 占位符，这些占位符会根据文件内容生成一个哈希值，当文件内容发生变化时，哈希值也会变化，从而实现版本控制。

在 vue.config.js中

javascript 复制代码

module.exports = {
	//使用outputDir 指定了输出目录
    outputDir: 'dist',
    configureWebpack: {
        output: {
        	path: path.resolve(__dirname, 'dist'),
            // 在 outputDir 的基础上，进一步指定文件名
            filename: '[name].[contenthash].js' 
        }
    }
};

配置完项目之后重启，查看项目是否正常运行。

如果出现报错为：

javascript 复制代码

Cannot use [chunkhash] or [contenthash] for chunk in '[name].[contenthash].js' (use [hash] instead)

则将 $contenthash$ 修改为 $hash$

javascript 复制代码

output: {
      path: path.resolve(__dirname, 'dist'),
      // 使用 [hash] 占位符，根据文件内容生成哈希值
      filename: '[name].[hash].js' 
   },

原因：

使用限制： $chunkhash$ 和 $contenthash$ 主要用于根据文件内容生成哈希值，以此来实现浏览器缓存的优化。在某些情况下，Webpack 没办法准确计算出文件内容的哈希值，像在动态导入模块或者某些特殊的代码分割场景中。

使用场景不匹配：当使用动态导入模块时，Webpack 可能无法确定每个代码块（chunk）的具体内容，所以不能使用 $chunkhash$ 或者 $contenthash$ 。
解决方案：

使用 $hash$ 替代： $hash$ 是基于整个构建过程生成的哈希值，而不是基于单个文件内容。虽然它的粒度没有 $chunkhash$ 和 $contenthash$ 那么细，但在某些无法使用它们的场景下可以作为替代方案。

另外，更详细的配置可以配置 splitChunks项。