I have folder structure like below
temp
|- package.json
|- package-lock.json
|- webpack.config.js
|- /src
|- /components
|- /button1.js
|- /button2.js
|- /id_selectors.js
|- /index.js
|- /templates
|- index.js
|- /dist
|- final.js
|- /node_modules
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<br>
<br>
<br>
<button id="button-1">Button 1</button>
<br>
<br>
<br>
<button id="button-2" onclick="btn2Clicked()">Button 2</button>
<script type="module" src="../dist/final.js"></script>
</body>
</html>
id_selectors.js
const btn1 = document.querySelector("#button-1");
button1.js
import "../id_selectors.js";
btn1.addEventListener('click', () => {
console.log('Button 1 clicked');
});
button2.js
const btn2Clicked= function() {
console.log('Button 2 clicked');
}
index.js
import './components/button1.js';
import './components/button2.js';
webpack.config.js
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'final.js',
path: __dirname + '/dist',
},
};
Problem is that btn2Clicked() in index.html is not working as it's giving "ReferenceError".
Someone please help me to properly configure webpack.config.js & index.js to make available 3 files (id_selectors.js, button1.js & button2.js) globally (i.e., browser window level) into index.html.
Also I don't want to modify id_selectors.js, button1.js & button2.js.
Note: I'm using Webpack 5.98.0
Thanks.
P.Roy.
