Webpack, html-loader, file-loader and extract-loader

I'm starting my learning path with webpack and I've hit a problem, which I think is caused by extract-loader. When webpack grabs my HTML file, it seems to be unable to properly compile, giving an error on the use of import.meta. I think the error, rather than being a true error, indicates a problem with my understanding of how webpack and its loaders work. Can someone give a look at my files and see if they spot a mistake?

I'm using node v15.12.0, and npm v7.6.3.

Thank you very much.

package.json

{
  "devDependencies": {
    "css-loader": "^5.2.0",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0"
  }
}

webpack.config.js:

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].html'
            }
          },
          'extract-loader',
          'html-loader'
        ]
      }
    ]
  }
}

src/main.js

require('./style.css')
require('./index.html')

src/style.css:

body {
    margin: 0;
}

src/index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Hello world!</h1>
    <script src="main.js"></script>
</body>
</html>

Webpack output:

$ npx webpack
asset bundle.js 19.6 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 8.95 KiB
  modules by path ./src/ 737 bytes
    modules by path ./src/*.css 651 bytes
      ./src/style.css 326 bytes [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/style.css 325 bytes [built] [code generated]
    ./src/main.js 47 bytes [built] [code generated]
    ./src/index.html 39 bytes [built] [code generated] [1 error]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

ERROR in ./src/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:54)
  1 | // Imports
  2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../node_modules/html-loader/dist/runtime/getUrl.js";
> 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./main.js", import.meta.url);
    |                                                       ^
  4 | // Module
  5 | var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
  6 | var code = "<!DOCTYPE html>\n<html lang=\"en\">\n<body>\n    <h1>Hello world!</h1>\n    <script src=\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\"></script>\n</body>\n</html>\n\n";
    at Parser.pp$5.raise (/home/jdferreira/Repositories/Temps/extract-loader-issue/node_modules/babylon/lib/index.js:4454:13)