I use this plugin for react-app，it wiil not inject to the html

[zhangjiana]

I found this problem. react-app use the [email protected]。 Its 'htmlWebpackPluginBeforeHtmlGeneration' has deprecated. so when I run my app, I found it will not inject to my html.

if (!compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration) { return; } I require html-webpack-plugin manually, and modify the code below ` compiler.hooks.compilation.tap('AutoDllPlugin', function (compilation) { if (!HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration) { return; }

      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('AutoDllPlugin', doCompilation);
    });

` It works!

But I don't know the right way to solve this problem. please help me, thank you !

[arrowing]

I write a custom plugin to sovle it.

/* A plugin to compitible html-webpack-plugin v4 otherwise failed of injection */

let fs = require("fs");
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

function getAutoDLLFiles() {
  // cacheDir : projectPath\node_modules\.cache\autodll-webpack-plugin
  var cacheDir = require("autodll-webpack-plugin/node_modules/find-cache-dir")({
    name: "autodll-webpack-plugin"
  });

  if (cacheDir) {
    let files = fs.readdirSync(cacheDir);
    let scripts, styles;
    let childDir = files.filter(
      item => item.indexOf("development_instance") > -1 // eg. development_instance_0_d58c4bb0bc931d01a844ded15994e547
    )[0];

    cacheDir = path.join(cacheDir, childDir);

    if (cacheDir) {
      // get files name
      files = fs.readdirSync(cacheDir);
      scripts = files.filter(item => item.endsWith(".js"));
      styles = files.filter(item => item.endsWith(".css"));
    }

    return { scripts, styles };
  }

  return { scripts: [], styles: [] };
}

class AutoDLLInjectPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    let _this = this;

    compiler.hooks.compilation.tap("AutoDllPlugin", function(compilation) {
      if (!HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration) {
        return;
      }

      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
        "AutoDllPlugin",
        function(htmlPluginData, callback) {
          // htmlPluginData.assets.js
          // ["/../dist/vendors/vendor.320d23.js", "/activity\\index.0aa46b.js"];

          let { scripts, styles } = getAutoDLLFiles();

          if (_this.options.fileMap) {
            scripts = scripts.map(_this.options.fileMap);
            styles = styles.map(_this.options.fileMap);
          }

          htmlPluginData.assets.js = [].concat(
            scripts,
            htmlPluginData.assets.js
          );

          htmlPluginData.assets.css = [].concat(
            styles,
            htmlPluginData.assets.css
          );

          // console.log(htmlPluginData.assets.js);
          callback(null, htmlPluginData);
        }
      );
    });
  }
}

module.exports = AutoDLLInjectPlugin;

Usage: Put the following code after html-webpack-plugin, like:

  let AutoDLLInjectPlugin = require("../plugins/AutoDLLInjectPlugin.js");
  config.plugins.push(
    new AutoDLLInjectPlugin({
      fileMap: filename => `/vendors/${filename}`
    })
  );

or

plugins: [
    new HtmlWebpackPlugin({
      filename: path.relative(
        path.join(projectPath, "src/pages"),
        html
      ),
      template: hbs,
      inject: true,
      chunks: [entry]
    }),
    new AutoDLLInjectPlugin({
      fileMap: filename => `/vendors/${filename}`
    })
  ]