A Webpack plugin for addressing javascripts (especially when hashed) in HTML.

html-assets-plugin.js

/*

  HtmlAssetsPlugin

  Require: fs-extra, glob
  Usage:
    In webpack.config.js, add this plugin.
      new HtmlAssetsPlugin('glob/for/all/html/like/*.html')
    In HTMLs, list all entries (including common if exists). Prefix '@' can be customed.
      <script type="text/javascript" src="@commons"></script>
      <script type="text/javascript" src="@stage"></script>
  How it works:
    Rewrite script tags and output new HTMLs to the specified dist directory.
  Shortage:
    HTMLs will not be watched.

*/

var fs = require('fs-extra');
var path = require('path');
var glob = require('glob');

function HtmlAssetsPlugin(htmlMatcher, scriptPrefix) {
  this.htmlMatcher = htmlMatcher;
  this.pather = file => path.resolve(
    path.join(__dirname, this.compiler.options.output.path),
    path.relative(__dirname, file)
  );
  this.regex = new RegExp('(<script .*src=")' + (scriptPrefix || '@') + '(.+?)(".*?></script>)', 'g');
  this.replacer = (whole, sBefore, chunkName, sAfter) =>
    this.entries[chunkName].map(
      chunkFile => sBefore + this.compiler.options.output.publicPath + chunkFile + sAfter
    ).join('');
  return this;
};

HtmlAssetsPlugin.prototype.apply = function (compiler) {
  this.compiler = compiler;
  compiler.plugin('compilation', c => c.plugin('after-optimize-chunk-assets', chunks => {

    this.entries = Object.create(null);
    chunks.forEach(chunk => {
      if (!(chunk.name in this.entries)) {
        this.entries[chunk.name] = [];
      }
      Array.prototype.push.apply(this.entries[chunk.name], chunk.files);
    });

    glob(this.htmlMatcher, (er, files) => {
      if (er) {
        console.error('glob', er);
        return;
      }
      files.forEach(file => fs.readFile(file, 'utf8', (er, content) => {
        if (er) {
          console.error('fs.readFile', er);
          return;
        }
        fs.outputFile(this.pather(file), content.replace(this.regex, this.replacer));
      }));
    });

  }));
};

module.exports = HtmlAssetsPlugin;