从 HTML 文件访问捆绑的 javascript（使用 webpack）中的函数

我目前正在开发一个 Web 应用程序，并且正在重构我的代码，以便将其捆绑在 WebPack 中。

在我的 HTML 中，我有一个按钮可以调用sendMessage()单击时的功能，

<button type="button" class="btn btn-default" onclick="sendMessage(document.getElementById('claim').value)">Submit</button>

在我的代码的第一个版本中，sendMessage()函数被定义在.js我直接在 HTML 中导入的文件，

<script src="my_js/newsArticleScript.js"></script>

sendMessage() 函数直接在文件中声明，它不在任何类或模块内，但它调用同一文件上定义的其他函数，所以我不想将它分开。

但现在它被 WebPack 捆绑了。这是我的配置文件（homepageScript.js用于另一页）：

const path = require('path')

module.exports = {
  entry: {
  	homepage: './src/homepageScript.js',
  	newspage: './src/newsArticleScript.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist/my_js')

  }
}

我更改了 HTML 上的脚本导入以导入捆绑版本。 现在，当我按下按钮时，我收到错误

[Error] ReferenceError: Can't find variable: sendMessage

我读过相关内容，并且了解到 webpack 不会全局公开这些函数。我尝试导出该函数，但不断收到相同的错误。

谁能帮我这个？本质上我需要的是了解如何配置 webpack 或更改 JS，以便可以通过 HTML 访问它。

我是 JS 新手，所以我很确定我的应用程序的设计方式不是最好的，因此任何有关改进的提示（也许我应该使用模块，或者有更好的方法在单击按钮时调用 JS 函数）也欢迎。谢谢 ：）

一般来说，使用基于文本的事件处理程序并不是一个好主意。也就是说，您有几个选择，并且变化量不断增加。

1. 对于文本onchange处理人员上班，sendMessage必须是全球性的。因此，最快的解决方法是更改​​代码来做到这一点。例如，如果您有

   function sendMessage(arg){}
   

   在您的代码中，您需要添加一个额外的

   window.sendMessage = sendMessage;
   

   在其之后将其公开为全局变量。

2. 更现代的方法是删除onchange从按钮并在 HTML 中用 ID 标记按钮，例如id="some-button-id".

   然后在你的JS代码中，你可以这样做

   var button = document.querySelector("#some-button-id");
   button.addEventListener("change", function(){
     sendMessage(document.getElementById('claim').value);
   });
   

   添加change处理函数使用 JS 代码，而不是 HTML 属性。