KMT Cachebuster Webpack plugin

Rewrites assets with hashes to assets without hashes compatible with KMT cachebusting. Generates cachebuster manifests compatible with KMT from webpack assets.

Generated assets in the form of asset.kmtWEBPACKHASH.js will be renamed to asset.js and the hash is added to the manifest.json

Usage

yarn add @kingsquare/kmt-cachebuster-webpack-plugin

Or

npm i @kingsquare/kmt-cachebuster-webpack-plugin

Then add the plugin to your webpack configuration

const KmtCachebusterWebpackPlugin = require('@kingsquare/kmt-cachebuster-webpack-plugin');

Configuration

const config = {
  output: {
    filename: "app.kmt[contenthash:8].js",
    chunkFilename: "app.chunk[name].kmt[contenthash:8].js"
  },
  plugins: [
    new KmtCachebusterWebpackPlugin()
  ]
};

Setting the entry/asset filename/chunkFilename to [name].kmt[chunkhash:8].js should be done. This ensures that possible maps and/or code split assets will load with the correct hash (which is embedded in the generated webpack bootstrap)

Usage with Encore

As you can not easily change the entry/asset filename/chunkFilename in Encore, or do not want to. You will have to use the following configuration to get the correct assets for KMT.

Encore
  // ... and lastly
  .addPlugin(
    new KmtWebpackPluginCachebuster({
      hashPrefix: ""
    }),
    42 // A priority that no one knows if it is the last
  );

Generated assets in the form of asset.WEBPACKHASH.js will be renamed to asset.js and the hash is added to the manifest.json

Compatibility

• Webpack 3
• Webpack 4
• Webpack 5