访问未在 webpack 项目中执行的按钮单击处理程序

Question

我有一个非常简单的设置来理解 webpack 基础知识。下面是我的项目结构

当运行项目和点击 index.html 页面中的按钮时，处理程序不会被执行，而是在控制台中记录错误.

请查找项目here

这可能是一个非常愚蠢的问题，但我无法理解这种行为。希望有人可以帮助我。谢谢！

Answer 1

除非在使用 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>
...

查看 webpack output.library 了解更多信息。

访问未在 webpack 项目中执行的按钮单击处理程序

Access to Button click handler not executing in a webpack project

javascript

frontend

reactjs

webpack