I'm trying to dynamically inject the header with Jquery inside the index.html but the console reports an error:

Uncaught ReferenceError: jQuery is not defined

I'm making several attempts but the problem persists, would anyone be able to help me?

webpack.confing.js

...
    plugins: [].concat(
        pages.map(
            (page) =>
                new HtmlWebpackPlugin({
                    inject: true,
                    template: `./src/html/${page}.html`,
                    filename: `./src/html/${page}.html`,
                    chunks: [page],
                })
        ),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ),
    devServer: {
      watchContentBase: true,
      contentBase: path.resolve(__dirname, 'dist'),
      open: true
    },
    externals: {
        jquery: 'jQuery'
    },
    mode: 'production',
};

index.js

import '../css/style.css';
import '../css/style.scss';
import Icon from '../resources/img/icon.png';
require('jquery');
window.$ = jQuery;

index.html

<div>${require('../includes/header.html')}</div>
<h1 class="hello">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet</p>
<img src="../resources/img/icon.png" alt="img home"/>
<div>${require('../includes/footer.html')}</div>

package.json

...
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "jquery": "^3.6.0",
    "jquery-ui": "^1.13.1"
  }
}