Estoy tratando de inyectar dinámicamente el encabezado con Jquery dentro de index.html pero la consola informa un error:

 Uncaught ReferenceError: jQuery is not defined

Estoy haciendo varios intentos pero el problema persiste, ¿alguien podría ayudarme?

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', };

índice.js

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

índice.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>

paquete.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" } }