WebPack Cache busting hash in file names never changes - gulp

Question

I am trying to get cache busting in my gulp file output to work. Currently it outputs a file like this: main.2d06434c1c57525870ac-e7615836.js but whenever I modify typescript files and rebuild the hash in the file name output is always the same.
I have tried the built in webpack hashing and the gulp vinyl-named hashing to see if there was something wrong with one of their configurations but again their output filename is the same on each rebuild.
Here is the related part of my builder task. Thanks!
var packer = gulp.src(['./src/basePolyfills.ts', './src/external.ts', './src/main.ts'])
.pipe(named())
.pipe(webpack({
output: { filename: '[name].[hash].js' },
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts' },
{ test: /\.html$/, loader: 'html' }
]
},
resolve: { extensions: ['', '.js', '.ts'] }
}))
.pipe(hash())
.pipe(gulp.dest('./wwwroot/js/'));

Answer 1

Where is your hash() coming from? As far as I know, webpack automatically calculates chunkhashes. Be aware that there is a difference between "hash" and "chunkhash". chunkhash is a hash per chunk, whereas "hash" seems to be a hash over all files.
Can you try:
var packer = gulp.src(['./src/basePolyfills.ts', './src/external.ts', './src/main.ts'])
.pipe(named())
.pipe(webpack({
output: { filename: '[name].[chunkhash].js' },
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts' },
{ test: /\.html$/, loader: 'html' }
]
},
resolve: { extensions: ['', '.js', '.ts'] }
}))
.pipe(gulp.dest('./wwwroot/js/'));