html-webpack-plugin将hash：true与SplitChunksPlugin一起使用时，输出哈希始终相同

Question

我用react开发一个asp.net mvc5项目。我使用webpack4 create Multiple Page Application。我使用SplitChunksPlugin和HtmlWebPackPlugin拆分供应商代码和应用程​​序代码。但我发现输出js文件的哈希值始终相同：

<script type="text/javascript" src="../../Scripts/Ts/dist/js/vendors.app.bundle.js?2f5c225068d4232f8e8d"></script>
<script type="text/javascript" src="../../Scripts/Ts/dist/js/app.bundle.js?2f5c225068d4232f8e8d"></script></body>

代码的任何更改都会使哈希值全部更改：并更改为相同。 不利于浏览器缓存。 这是我的配置：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: {
        app: ['./src/App.ts']
    },
    optimization: {
        splitChunks: {
          chunks: 'all',
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
          }
        }
      },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./src/index.html",          
            hash: true
        }),
        new HtmlWebPackPlugin({
            template: './src/Main.cshtml',
            filename: path.resolve(__dirname, '../../Views/Home/Main.cshtml'),     
            chunks:['vendors.app','app'],
            hash: true           
        })
    ]
};



It Seem to vendors.app.bundle.js and app.bundle.js share hash.
How can i do let output use self hash?