Access to Button click handler not executing in a webpack project-CodePudding

I have a very simple setup to understand the webpack basics. Below is my project structure

While running the project and upon clicking on the buttons in the index.html page, the handlers are not getting executed instead log errors in the console.

Please find the project here

This may be a very silly question, but I could not understand this behavior. Hope someone can help me with this. Thanks!

CodePudding user response：

You can't use the functions unless you export them when you use webpack.

index.js

export function click_blue() { ... }
export function click_red() { ... }

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'lib',   // add this!
  },
  mode: 'development'
};

index.html

...
<button onclick="lib.click_red()">Red</button>
...

Check webpack output.library for more information.