Webpack将动态加载的块注入页脚而不是头部

Question

我正在使用Webpack将我的JavaScript打包为大块。这是我的webpack配置：

import path from 'path';
import glob from 'glob';

//import plugins
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//set environment and setup paths
const prodEnv = process.env.NODE_ENV === 'production';
const fileNameEnv = prodEnv ? '[name].bundle.[chunkHash].js' : '[name].bundle.js';
const chunkFileNameEnv = prodEnv ? '[name].bundle.[chunkHash].js' : '[name].bundle.js';
const webpackInitTemplate = path.resolve(path.join(__dirname, '..', '..', '..', 'path/to/template/webpack.phtml'));

/**
 * Only one webpack file is generated for both mgresponsive & mennace as mennace falls back to the mgresponsive theme
 */
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './webpack_template.phtml',
  filename: webpackInitTemplate,
  inject: true
});

const extractSassPlugin = new MiniCssExtractPlugin({
  filename: prodEnv ? "[name].[hash].css" : "[name].css",
  chunkFilename: prodEnv ? '[id].[hash].css' : '[id].css'
});

//this combines an entry file with all the index files to allow the webpack publicUrl path to be set from the window JS var
const moduleEntryFiles = [path.resolve(__dirname, 'modules', 'entry.js')];
const moduleIndexFiles = glob.sync(path.resolve(__dirname, 'modules', '*/index.js'));
moduleIndexFiles.forEach(element => {
  moduleEntryFiles.push(element);
});

const webPackConfig = {
  entry: {
    polyfill: [
      'core-js/fn/array/find',
      'core-js/fn/array/for-each',
      'core-js/fn/object/assign',
      'core-js/fn/promise',
      'nodelist-foreach-polyfill'
    ],
    main: './source/main.js',
    modules: moduleEntryFiles
  },
  output: {
    filename: fileNameEnv,
    chunkFilename: chunkFileNameEnv,
    path: path.resolve('./dist'),
    publicPath: `/webpack/dist/`
  },
  externals: {
    jquery: 'jQuery',
    modernizr: 'Modernizr'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve('./source'), path.resolve('./modules')],
        exclude: [/node_modules/, /\.test\.js$/],
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
                ['transform-class-properties'],
              [
                'transform-runtime', {
                  polyfill: false,
                  helper: false,
                  regenerator: true
                }
              ]
            ]
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          {  
            loader: MiniCssExtractPlugin.loader,
            options: {
                hmr: process.env.NODE_ENV === 'development'
            }
          },
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.phtml$/,
        loader: "handlebars-loader"
      },
      {
        test: /\.svg$/,
        use: {
            loader: 'svg-url-loader',
            options: {

            }
        }
      },
     {
         test: /\.(html)$/,
         use: {
             loader: 'html-loader',
             options: {
                 minimize: true,
                 removeComments: true,
                 collapseWhitespace: true
             }
         }
     }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    HtmlWebpackPluginConfig,
    extractSassPlugin
  ]
};

/**
 * Product only webpack config
 */
if(prodEnv) {
    webPackConfig.plugins.push(new UglifyJsPlugin({
        sourceMap: true
    }));
}

module.exports = webPackConfig;

这将创建3个捆绑软件，这些捆绑软件包含在我的网站页脚中：

polyfill.bundle.[hash].js
main.bundle.[hash].js
modules.bundle.[hash].js

如果检查站点的头部，我会看到许多其他捆绑包已动态插入其中，其名称如下：

3.bundle.[hash].js
7.bundle.[hash].js
8.bundle.[hash].js

在网络标签中，如果我查看这些脚本中的任何一个的启动器，则表明它们是由modules.bundle.[hash].js文件启动的，如果我查看modules.bundle.[hash].js文件的源代码，则可以看到document.head.appendChild()正在逐个追加脚本。有没有一种方法可以更改配置，以使该捆绑包文件不会将其附加到头部，而是将其放在结束body标签之前？