Avoid flickering while loading the page (due to CSS being loaded after the HTML text, I guess)

Question

I already searched here in SO for a while, for sure already exists something, but probably I'm missing the correct terms to search.

I started recently to bundle all my front-end assets in a single bundle with webpack, but now when the page loads, the page flickers due to the fact (I guess), that CSS is loaded only after the HTML text.

How can I avoid this?

As mentioned, I'm using webpack to bundle all JS and CSS files. My webpack bundling script:

const path = require('path')
const colors = require('colors/safe')
const appRoot = require('app-root-path')
const webpack = require('webpack')
const CopyPlugin = require('copy-webpack-plugin')

const commonsDir = path.join(appRoot.path, '..', 'resources', 'routines', 'commons')
const { getFiles } = require(path.join(commonsDir, 'file.js'))

const srcDir = path.resolve(appRoot.path, 'src', 'public', 'src').replace(/\\/g, '/')
const docsDir = path.resolve(appRoot.path, 'docs', 'dist').replace(/\\/g, '/')
const destDir = path.resolve(appRoot.path, 'src', 'public', 'dist')

const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'
console.log('mode:', mode)

module.exports = async () => {
  // assemble JS files as entry points
  const jsFiles = [
    path.join(srcDir, 'js', 'index.js'),
    path.join(srcDir, 'js', 'import-bootstrap.js')
  ]
  const files = await getFiles(path.join(srcDir, 'js', 'routes'))
  jsFiles.push(...files.filter(f => path.extname(f) === '.js'))

  const JSentryPointsObj = {}
  jsFiles.forEach(file => {
    JSentryPointsObj[path.basename(file)] = file
  })

  webpack({
    entry: JSentryPointsObj,
    output: {
      filename: path.join('js', '[name]'),
      path: destDir,
      clean: true
    },
    module: {
      rules: [
        {
          test: /\.png/,
          type: 'asset/resource'
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource'
        }
      ]
    },
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: path.posix.join('*'),
            context: srcDir
          },
          {
            from: path.posix.join('img', '**/*'),
            context: srcDir
          },
          {
            from: path.posix.join('icons', '**/*'),
            context: srcDir
          },
          {
            from: path.posix.join('*'),
            to: 'docs',
            context: docsDir
          }
        ]
      })
    ],
    mode: mode
  }, (err, stats) => {
    if (err || stats.hasErrors()) {
      if (err) {
        console.error(err)
        throw new Error(err)
      } else {
        console.log(
          stats.toString({
            chunks: false, // Makes the build much quieter
            colors: true // Shows colors in the console
          })
        )
        throw new Error(stats.toString())
      }
    } else {
      console.log(colors.green('\nFront-end assets built into ' + path.relative(appRoot.path, destDir)))
    }
  })
}