Ionic cache busting – Webpack

Out of the box, ionic webpack generates [nr].js files. When running in a browser these files are most probably cached. The following text explains a not perfectly dry but still reasonable solution.

First copy
node_modules\@ionic\app-scripts\config
to a the config folder of your app. Change the generated name and add a random (or not so random) string, i used the version identifier

...
var versionNr = 'v0.0.1';
... 
var prodConfig = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    ...
    filename: '[name]-' + versionNr + '.js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  ... 
  // do the same for devConfig 
  ...

In your package.json configure webpack to use the file you changed

{
    "name": "my-awesome-app",
    "version": "0.0.1",
    "author": "Anagram Engineering",
    "homepage": "http://anagram.at/",
    "private": true,
    "config": {
        "ionic_copy": "./config/copy.config.js", // a custom copy scripts - not required 
        "ionic_webpack": "./config/webpack.config.js" // tell ionic to use the adapted webpack configuration
    },

You will also need to change the index.html an tell it to use the generated version

   
    ... script src="build/polyfills.js" ...
    ... script src="build/vendor-v0.0.1.js" ...
    ... script src="build/main-v0.0.1.js" ...

This is working with partials and lazy loading enabled.