通过保留先前的哈希来确保缓存供应商捆绑包

Question

我尝试使用splitChunksPlugin将供应商deps和我的脚本分隔成单独的捆绑包，它似乎正在使用the example they provide。但是，我不认为缓存方面正在工作，因为webpacking项目将生成app-087620f3a62a222ec83e.js和vendors-087620f3a62a222ec83e.js文件，但是只对我的代码进行更改会为这两个文件生成新的哈希值，其中I希望供应商的哈希后缀保持不变。我的webpack配置中的输出对象是：

output: {
  path: path.resolve(process.cwd(), 'dist'),
  publicPath: '/',
 filename: 'scripts/[name]-[hash].js'
},

我尝试将[hash]更改为[chunkhash]，根据文档guide to caching认为听起来更合理一些，但是webpack因错误而失败：

  

ERROR in chunk bundleUnAuth [entry] scripts/[chunkhash].js Cannot use [chunkhash] or [contenthash] for chunk in 'scripts/[chunkhash].js' (use [hash] instead)

commonsChunkPlugin的替代品并不表示它需要NamedModulesPlugin或HashedModuleIdsPlugin作为its predecessor indicates it does这样的细微差别，可能会发生同样的事情。

如何确保分块插件为未更改的供应商文件保留相同的哈希值，同时更新我控制的已更改的脚本的哈希值？

Answer 1

首先，您应该将runtimechunk字段与splitChunksPlugin一起使用。

例如：

  runtimeChunk: {
    name: 'manifest',
  },
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
      },
    },
  },

通过配置runtimeChunk，将创建一个名为manifest的新块。该主干包含webpack运行时和manifest。每次更改代码时，manifest都会发生变化。通过将其提取到单独的块，供应商主干的散列在构建之间将保持相同。

对于生产构建，还建议使用HashedModuleIdsPlugin或NamedModulesPlugin。因为当您重命名/移动应用程序代码时，他们可以保持供应商模块的模块ID保持不变。