webpack-single-file-bundle-loader.js

const webpack = require("webpack");
const { RawSource } = require("webpack-sources");

class DynamicLoadScript {
  constructor(options = { filename: "bundle.js" }) {
    this.options = options;
  }
  apply(compiler) {
    compiler.hooks.thisCompilation.tap("DynamicLoadScript", (compilation) => {
      compilation.hooks.processAssets.tapPromise(
        {
          name: "DynamicLoadScript",
          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER,
        },
        () =>
          new Promise((resolve) => {
            try {
              const assetNames = Object.keys(compilation.assets)
                .filter((v) => v.endsWith(".js"))
                .filter((v) => {
                  const chunk = compilation.chunks.find((chunk) =>
                    chunk.files.includes(v)
                  );
                  return chunk && chunk.isOnlyInitial();
                })
                .map((v) => compilation.options.output.publicPath + v);

              const code = `
                (function (f) {
                  for(let i = 0; i < f.length; i++) {
                    let s = document.createElement("script");
                    s.src = f[i];
                    s.defer = true;
                    document.head.appendChild(s);
                  }
                })(${JSON.stringify(assetNames)});
              `;

              compilation.assets[this.options.filename] = new RawSource(code);
            } catch (err) {}
            resolve();
          })
      );
    });
  }
}

module.exports = DynamicLoadScript;