如何在 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/