我目前正在开发一个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函数）也会受到欢迎。Thank you：）
2条答案
按热度按时间iyzzxitl1#
通常使用基于文本的事件处理程序不是一个好主意。也就是说，你有几个选择，随着变化的增加。
1.要让texual
onchange处理程序工作，sendMessage必须是全局的。因此，最快的解决方法是更改您的代码来执行此操作。例如，如果你有在代码中，您需要添加一个附加
将其作为全局变量公开。
1.更现代的方法是从按钮中删除
onchange，并在HTML中用ID标记按钮，例如。id="some-button-id"。然后在你的JS代码中，你可以
使用JS代码添加
change处理函数，而不是使用HTML属性。laik7k3q2#
要使用webpack的库输出（https：//webpack.js.org/configuration/output/#outputlibrary）添加modern选项，您可以通过在webpack配置中为模块定义输出变量来公开模块导出，如下所示：
现在假设你的webpack入口点js文件使用了一个
namedExport函数，你将能够在你的html或后续脚本中调用它：因此，在最初的问题中，假设
newsArticleScript.js将sendMessage函数导出为命名导出（export const sendMessage = (arg) => ...），并且webpack配置定义了输出变量NewsArticle，则sendMessage可以用作onclick处理程序，并