如何在js捆绑文件中添加哈希码以进行缓存

Question

是webpack配置的新手，请让我知道如何在生成的js捆绑包文件中添加哈希码，以便缓存我的静态资产。在此先感谢

Answer 1

要添加哈希码用于生成的包，请将这些行添加到您的webpack.config.js文件中。

output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
}

用于服务器缓存

您需要将您的主要块拆分为运行时块和供应商块。为此，您需要在webpack.config.js文件的优化部分中添加以下代码。

optimization: {
    runtimeChunk: 'single',
    moduleIds: 'hashed',
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                chunks: 'all',
            },
        },
    },
}

[每次更改代码时，其他块/哈希（供应商，运行时）都不会改变。因此，客户端（浏览器）不会从缓存中获取未加载的块。

参考链接https://webpack.js.org/guides/caching/