Webpack - 何时加载模块？答案

【问题标题】：Webpack - When are modules loaded?Webpack - 何时加载模块？
【发布时间】：2018-04-04 13:56:20
【问题描述】：

我有一个 reservation.js 脚本，其中包含一个将事件侦听器添加到表单输入的函数。

paymentInstalments.addEventListener('click', ()=> (...))

这个函数在页面加载时通过 jquery 的 $(document).ready() 执行

然而，这种方法被证明很麻烦，因为当我尝试加载的页面没有名为“paymentInstalments”的 id 时，我收到 TypeError“无法读取属性 'addEventListener' of null”。

这显然是因为我尝试添加事件侦听器的元素在 html 中不存在。

因此，我的问题是：Webpack 不应该足够聪明，能够理解何时执行给定的导入吗？还是由我来管理脚本何时执行？

提前非常感谢:)

【问题讨论】：

【解决方案1】：

如果您尝试在 DOM 元素实际存在于 DOM 中之前与它进行交互，您将会遇到这个问题。 Webpack 帮不了你。

如果您想为元素添加事件侦听器，但在访问它时遇到问题，请尝试将事件委托给您知道将存在的另一个元素。比如：

$('body').on('click', #paymentInstalments', function(e) {
    // do stuff
});

【讨论】：