最后，我通过创建一个脚本来解决这个问题，该脚本使用manifest.json（由WebpackManifestPlugin生成）来生成一个runtime.js脚本，该脚本将在页面加载时动态加载块，并将此runtime.js插入到index.html的头部。这可以从npm scripts部分使用tasksfile npm包调用。
在webpack配置中，将插件添加到插件数组中：

{
  // your other webpack config
  plugins: [
    new ManifestPlugin(),
    // other webpack plugins you need
  ],
}

字符串
我有下面的外部JS文件，我可以使用tasksfile npm包从我的npm scripts调用，它被配置为调用此函数：

// The path where webpack saves the built files to (this includes manifest.json)
const buildPath = './build';
// The URL prefix where the file should be loaded
const urlPrefix = 'https://www.yourdomain.com';

function buildRuntime() {
  const manifest = require(`${buildPath}/manifest`);
  // Loop through each js file in manifest file and append as script element to the head
  // Execute within an IIFE such that we don't pollute global namespace
  let scriptsToLoad = Object.keys(manifest)
    .filter(key => key.endsWith('.js'))
    .reduce((js, key) => {
      return (
        js +
        `
        script = document.createElement('script');
        script.src = urlPrefix + "/js/${manifest[key]}";
        document.head.appendChild(script);`
      );
    }, `(function(){var script;`);
  scriptsToLoad += '})()';

  // Write the result to a runtime file that can be included in the head of an index file
  const filePath = `${buildPath}/runtime.js`;
  fs.writeFile(filePath, scriptsToLoad, err => {
    if (err) {
      return console.log('Error writing runtime.js: ', err);
    }
    console.log(`\n${filePath} succesfully built\n`);
  });
}

型
该函数基本上循环了manifest.json中的所有JS条目文件。
然后创建脚本标记，将这些条目作为src属性，然后将这些脚本标记作为子项添加到document.head（触发条目的加载）。最后，将此脚本保存到runtime.js文件中，并存储在构建目录中。
现在你可以将这个runtime.js文件包含到你的html文件中，如果所有的路径都设置正确，你的块应该会被加载。

HtmlWebpackPlugin提供了一个chunks选项，您可以使用它来选择性地包含webpack配置的entry对象中的某些条目。使用它，您可以将自定义脚本中的大部分逻辑简化为单独的src/dynamic-load.js文件，只需将其添加到插件配置中：

entry: {
    runtimeLoader: './src/dynamic-load.js'
},
plugins: [
    new HtmlWebpackPlugin({
        // ...
        chunks: [ 'runtimeLoader' ]
    }),
]

字符串
（另一个chunks用法的例子可以在这里看到）。
甚至它们内置的templateParameters也可能允许您将构建输出文件名放入变量中，并在dynamic-load.js中读取它们。您必须为它创建自己的模板，但这可能是一条路线。您甚至可以看到他们建议的templateParameters示例是如何做到的。
如果这不起作用，您可以通过webpack本身通过afterEmit钩子获取捆绑的输出文件名，然后将其输出到dynamic-load.js将调用的JSON文件中。要点如下所示，但此时，您正在做与WebpackManifestPlugin相同的事情。

plugins: [
    {
        apply: compiler => {
            compiler.hooks.afterEmit.tap('DynamicRuntimeLoader', compilation => {
                const outputBundlePaths = Object.keys(compilation.assets)

                // output to dist/files.json
                saveToOutputDir('files.json', outputBundlePaths);
            });
        }
    },
    // ...
]

// dynamic-load.js

fetch('/files.json').then(res => res.json()).then(allFiles => {
    allFiles.forEach(file => {
        // document.createElement logic
    });
});

型
最后一点：WebpackManifestPlugin实际上是一个assets manifest，不会产生correct manifest.json。他们应该将默认文件名更新为assets-manifest.json，但我猜还没有人向他们指出这一点。

https://github.com/webpack/webpack/issues/11816#issuecomment-716402552

declare var __webpack_get_script_filename__: any;
const oldFn = __webpack_get_script_filename__;

__webpack_get_script_filename__ = (chunkId) => {
  const filename = oldFn(chunkId);
  return filename + `?v=${environment.timestamp}`;
};

字符串
巴里快跑。RUNNNNN...用这个超级强大的脚本！