config-overrides.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineCssWebpackPlugin =
  require('html-inline-css-webpack-plugin').default;
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

module.exports = {
  webpack: function (config, env) {
    //inline css and scripts right after chunk plugin.
    //chunk plugin will not be present for development build and thats ok.
    const inlineChunkHtmlPlugin = config.plugins.find(
      (element) => element.constructor.name === 'InlineChunkHtmlPlugin',
    );
    if (inlineChunkHtmlPlugin) {
      config.plugins.splice(
        config.plugins.indexOf(inlineChunkHtmlPlugin),
        0,
        new HtmlInlineCssWebpackPlugin(),
        new HtmlInlineScriptPlugin(),
      );
    }

    //Override HtmlWebpack plugin with preserving all options and modifying what we want
    const htmlWebpackPlugin = config.plugins.find(
      (element) => element.constructor.name === 'HtmlWebpackPlugin',
    );
    config.plugins.splice(
      config.plugins.indexOf(htmlWebpackPlugin),
      1,
      new HtmlWebpackPlugin({
        ...htmlWebpackPlugin.userOptions,
        inject: 'body',
      }),
    );

    return config;
  },
};