Bdtjtk

I have extended default web pack config in Ionic v3 for forcing cache buster.
I am able to fingerprint generated javascript artifacts but unable to fingerprint images and JSON files under the assets folder.
I took Help from Bundled files and cache busting.

an excerpt of webpack config.js

module.exports = {

  // ...

  output: {

    filename: '[name].[chunkhash].js',

    chunkFilename: '[name].[chunkhash].js',

  },

  plugins: [

    new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value

  ]

}

Above is the approach for fingerprinting javascript bundles and it's working fine I want to add hashes/Fingerprint images and JSON files inside assets folder i used the same approach for images also but it did not work.
I have extended webpack config.js and added a new rule for images.
By default webpack directly copies the images and assets to the output folder.

Copy Config.js

module.exports = {

  copyAssets: {

    src: ['{{SRC}}/assets/**/*'],

    dest: '{{WWW}}/assets'

  },

  copyIndexContent: {

    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],

    dest: '{{WWW}}'

  },

  copyFonts: {

    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],

    dest: '{{WWW}}/assets/fonts'

  },

here images and other assets are directly copied.
I have added a new rule in extended webpack.config.js but the build process is ignoring it. how to fix this issue??

excerpt of webpack config.js

 {

        test: /.(png|jpg|gif)$/,

        loader: 'file-loader',

        options: {



            name:'[name].[hash].[ext]',//adding hash for cache busting

            outputPath:'assets/imgs',

            publicPath:'assets/imgs'





        },

entire Webpack.config.js

/*

 * The webpack config exports an object that has a valid webpack configuration

 * For each environment name. By default, there are two Ionic environments:

 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object

 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration

 * For details on configuring webpack, see their documentation here

 * https://webpack.js.org/configuration/

 */



var path = require('path');

var webpack = require('webpack');

var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);



var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;



var optimizedProdLoaders = [

  {

    test: /.json$/,

    loader: 'json-loader'

  },

  {

    test: /.js$/,

    loader: [

      {

        loader: process.env.IONIC_CACHE_LOADER

      },



      {

        loader: '@angular-devkit/build-optimizer/webpack-loader',

        options: {

          sourceMap: true

        }

      },

    ]

  },

  {

    test: /.ts$/,

    loader: [

      {

        loader: process.env.IONIC_CACHE_LOADER

      },



      {

        loader: '@angular-devkit/build-optimizer/webpack-loader',

        options: {

          sourceMap: true

        }

      },

      {

        test: /.(png|jpg|gif)$/,

        loader: 'file-loader',

        options: {



            name:'[name].[hash].[ext]',

            outputPath:'assets/imgs',

            publicPath:'assets/imgs'





        },

      },





      {

        loader: process.env.IONIC_WEBPACK_LOADER

      }

    ]

  }

];



function getProdLoaders() {

  if (process.env.IONIC_OPTIMIZE_JS === 'true') {

    return optimizedProdLoaders;

  }

  return devConfig.module.loaders;

}



var devConfig = {

  entry: process.env.IONIC_APP_ENTRY_POINT,

  output: {

    path: '{{BUILD}}',

    publicPath: 'build/',

    filename: '[name].js',

    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),

  },

  devtool: process.env.IONIC_SOURCE_MAP_TYPE,



  resolve: {

    extensions: ['.ts', '.js', '.json'],

    modules: [path.resolve('node_modules')]

  },



  module: {

    loaders: [

      {

        test: /.json$/,

        loader: 'json-loader'

      },

      {

        test: /.ts$/,

        loader: process.env.IONIC_WEBPACK_LOADER

      },

      {

      test: /.(jpg|png)$/,

         use: {

         loader: "file-loader",

         options: {

         name: "[name].[hash].[ext]",

         outputPath:'assets/imgs',

         publicPath:'assets/imgs'



    },

  }},

    ]

  },



  plugins: [

    ionicWebpackFactory.getIonicEnvironmentPlugin(),

    ionicWebpackFactory.getCommonChunksPlugin()

  ],



  // Some libraries import Node modules but don't use them in the browser.

  // Tell Webpack to provide empty mocks for them so importing them works.

  node: {

    fs: 'empty',

    net: 'empty',

    tls: 'empty'

  }

};



var prodConfig = {

  entry: process.env.IONIC_APP_ENTRY_POINT,

  output: {

    path: '{{BUILD}}',

    publicPath: 'build/',

    filename: '[name].js',

    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),

  },

  devtool: process.env.IONIC_SOURCE_MAP_TYPE,



  resolve: {

    extensions: ['.ts', '.js', '.json'],

    modules: [path.resolve('node_modules')]

  },



  module: {

    loaders: getProdLoaders()

  },



  plugins: [

    ionicWebpackFactory.getIonicEnvironmentPlugin(),

    ionicWebpackFactory.getCommonChunksPlugin(),

    new ModuleConcatPlugin(),

    new PurifyPlugin()

  ],



  // Some libraries import Node modules but don't use them in the browser.

  // Tell Webpack to provide empty mocks for them so importing them works.

  node: {

    fs: 'empty',

    net: 'empty',

    tls: 'empty'

  }

};





module.exports = {

  dev: devConfig,

  prod: prodConfig

}

Using webpack4 you should not need any additional plugins or loaders.

It will give you the naming option [contenthash].

Also, it looks like you have this block nested under the test: .ts block.

{

    test: /.(png|jpg|gif)$/,

    loader: 'file-loader',

    options: {



        name:'[name].[hash].[ext]',//adding hash for cache busting

        outputPath:'assets/imgs',

        publicPath:'assets/imgs'





    },

Ultimately, you can do something like this:

        // Copy static assets over with file-loader

        {

            test: /.(ico)(?v=[0-9].[0-9].[0-9])?$/, 

            loader: 'file-loader', options: {name: '[name].[contenthash].[ext]'},

        },

        {

            test: /.(woff|woff2|eot|ttf|otf)(?v=[0-9].[0-9].[0-9])?$/, 

            loader: 'file-loader', options: {name: 'fonts/[name].[contenthash].[ext]'},

        },

        {

            test: /.(jpg|gif|png|svg)(?v=[0-9].[0-9].[0-9])?$/, 

            loader: 'file-loader', options: {name: 'images/[name].[contenthash].[ext]'},

        }

    ]

Using [chunkhash] instead of content should still work, and if you're not using webpack4 do that, but otherwise for more information see this issue for explanation.

For more help, read the longterm caching performance guide from google and the latest caching documentation from webpack.

Using webpack-assets-manifest you can generate a map of asset names to fingerprinted names like so:

{

  "images/logo.svg": "images/logo-b111da4f34cefce092b965ebc1078ee3.svg"

}

Using this manifest you can then rename the assets in destination folder, and use the "correct", hash-inclusive src or href in your project.

The fix isn't framework-specific.