InlineManifestHtmlWebpackPlugin

InlineManifestHtmlWebpackPlugin.js

const fs = require('fs');
const path = require(`path`);

class InlineManifestHtmlWebpackPlugin {
  constructor(options) {
    this.options = Object.assign(
      {manifestFileName: 'chunk-map.json', manifestVariable: '__chunkMapping'},
      options,
    );
  }

  apply(compiler) {
    const outputPath = compiler.options.output.path;
    const manifestPath = path.resolve(
      outputPath,
      this.options.manifestFileName,
    );
    const manifestVariable = this.options.manifestVariable;

    const getManifest = () => {
      if (fs.existsSync(manifestPath)) {
        return JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
      }
      return null;
    };

    compiler.hooks.compilation.tap(
      'InlineManifestHtmlWebpackPlugin',
      compilation => {
        compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
          'InlineManifestHtmlWebpackPlugin',
          (htmlPluginData, callback) => {
            const manifest = getManifest();
            if (manifest) {
              const newTag = {
                tagName: 'script',
                closeTag: true,
                attributes: {
                  type: 'text/javascript',
                },
                innerHTML: `window.${manifestVariable}=${JSON.stringify(
                  manifest,
                )}`,
              };

              htmlPluginData.head.unshift(newTag);
            }

            callback(null, htmlPluginData);
          },
        );
      },
    );
  }
}

module.exports = InlineManifestHtmlWebpackPlugin;