I have an issue with cache busting with angular 4 and Asp.net core project.
I use asp.net core with webpack to bundle files. we do append asp-append-version="true" on our index.html page and all of our chunkFilename have [chunkhash]. By this on deployment all changes are requested by the browser if the user logoff and login in again, as the index.html page will include the new main-client.js?v=version part.
The problem happens for users who do not logout, how can I force the browser to detect that index.html iteself has changed and see that the cached bundle ?version is not valid anymore?
Webpack:
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
// Configuration in common to both client-side and server-side bundles
module.exports = {
devtool: isDevBuild ? 'inline-source-map' : false,
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
alias: {
jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js')
}
},
entry: {
'polyfills': './ClientApp/app/polyfills.ts',
'vendor': './clientApp/app/vendor.ts',
'main-client': './ClientApp/boot-client.ts'
},
output: {
filename: '[name].js',
chunkFilename: 'chunk.[id].[chunkhash:8].js',
publicPath: '/dist/',
path: path.join(__dirname, './wwwroot/dist')
},
module: {
rules: [{
test: /\.ts$/,
exclude: [/\.spec\.ts$/, /node_modules/],
use: ['ts-loader', 'angular2-router-loader', 'angular2-template-loader']
}, {
test: /\.html$/,
loader: 'raw-loader'
}, { // Load css files which are required in vendor.ts
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
sourceMap: isDevBuild
}
}
})
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
use: [{
loader: 'url-loader',
options: { limit: 100000 }
}]
},
{ test: /\.scss$/, use: ['raw-loader', 'sass-loader'] },
{ test: /\.json$/, loader: 'json-loader' }
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name: ['main-client', 'vendor', 'polyfills']
}),
//new CleanWebpackPlugin(['./wwwroot/dist/']),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: false
})
])
};
And My Index page:
@{
ViewData["Title"] = "App";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>@ViewData["Title"]</title>
<base href="/" />
<link rel="stylesheet" href="~/preloader/preloader.css" asp-append-version="true" />
</head>
<body>
<app-root></app-root>
<div class="preloader">
<div class="preloader-progress">
<div class="preloader-progress-bar"></div>
</div>
</div>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<script src="~/dist/polyfills.js" asp-append-version="true"></script>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
<script src="~/preloader/preloader.js" asp-append-version="true"></script>
@section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
</body>
</html>
