Webpack 网页包长期缓存 脚本

我正试图使用webpack将我的供应商脚本与我的应用程序脚本分开打包

尝试1 index.js

webpack.config.js

结果

现在，如果我更改为

index.js

index.js

结果

即使我只更新了索引文件，这两个散列也会更改

这两个供应商文件之间的区别是

vendor.72c95e21a8d7096d53bc.js

script.src=uuuu网页包_uu需要_uuu.p++“+chunkId++”（{0:“app”}[chunkId]| | chunkId）+“++{0:“3437c5da57e0c6671675”}[chunkId]+.js”

vendor.0e76f9c86cbe02606265.js

script.src=uuuuu网页包_uu需要_uuu.p++“+chunkId++”（{0:“app”}[chunkId]| | chunkId）+“++{0:“c724350371b50a9afeb2”}[chunkId]+.js”

尝试2
在做了一些研究之后，我发现了下面的文章，其中解释了webpack生成了一个包含块标识符的chuck清单，该标识符位于条目块中。这就解释了上述差异。解决方案是将chuck清单提取到一个单独的文件中


index.js

webpack.config.js

结果

现在，如果我更改为
index.js

index.js

结果

即使我只更新了索引文件，这两个哈希值还是会再次改变

但是，这一次，两个供应商文件之间没有区别

问题
是否有原因导致上述场景不起作用，或者我根本没有正确处理这个问题

是否有一种更简单的方法可以让webpack实现我想要做的事情，因为即使我完成了上面的步骤，我也必须阅读清单，然后将其注入到我的index.html页面中？
最新的webpack版本似乎有问题，请参阅开放问题

所以现在您不能依赖[chunkhash]，最简单的解决方案是使用自定义哈希，比如
，每次发布时都在后端对其进行更改。
试试看，这似乎效果不错

第一幢

js/app-379075f0ea0b0e0148f3.js 2.19 kB 0[emissed]app
js/react-da22e98119ee46232ff7.js 747 kB 1[emissed]react

重建，仅应用程序已更改

js/app-fc7ca0df6dfcf7ca77f7.js 2.21 kB 0[emissed]app
js/react-da22e98119ee46232ff7.js 747 kB 1[emissed]react

var _ = require('lodash');
console.log(_)

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
  entry: {
    vendor: ['lodash'],
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  plugins: [

    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity,
    }),

    new HtmlWebpackPlugin({
        filename: 'index.html',
        inject: true
    })
  ]
};

module.exports = config;

                         Asset       Size  Chunks             Chunk Names
       app.3437c5da57e0c6671675.js  145 bytes       0  [emitted]  app
    vendor.72c95e21a8d7096d53bc.js     428 kB       1  [emitted]  vendor
                        index.html  232 bytes          [emitted]

var _ = require('lodash');
console.log('changed index');
console.log(_)

                Asset       Size  Chunks             Chunk Names
   app.c724350371b50a9afeb2.js  177 bytes       0  [emitted]  app
vendor.0e76f9c86cbe02606265.js     428 kB       1  [emitted]  vendor
                    index.html  232 bytes          [emitted]

var _ = require('lodash');
console.log(_)

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

var config = {
  entry: {
    vendor: ['lodash'],
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  plugins: [

    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity,
    }),

    new ChunkManifestPlugin({
      filename: "manifest.json",
      manifestVariable: "webpackManifest"
    }),

    new HtmlWebpackPlugin({
        filename: 'index.html',
        inject: true
    })
  ]
};

module.exports = config;

               Asset       Size  Chunks             Chunk Names
app.3437c5da57e0c6671675.js  145 bytes       0  [emitted]  app
             manifest.json   35 bytes          [emitted]
vendor.72c95e21a8d7096d53bc.js     428 kB       1  [emitted]  vendor

var _ = require('lodash');
console.log('changed index');
console.log(_)

               Asset       Size  Chunks             Chunk Names
app.c724350371b50a9afeb2.js  177 bytes       0  [emitted]  app
             manifest.json   35 bytes          [emitted]
vendor.0e76f9c86cbe02606265.js     428 kB       1  [emitted]  vendor