javascript - document.getElementById不适用于Webpack

我一直在尝试使用Webpack实现基本的Javascript，但是在尝试使基本方法正常工作时发现了很多麻烦。我知道这可能是在DOM之前加载我的js的问题，但是我对此问题的所有修复都是徒劳的。

例如，我试图只运行let taskinput = document.getElementById('new-task');，当我在控制台中搜索taskinput变量时，我得到的是Uncaught ReferenceError: taskinput is not defined(…)的返回值。

我已经尝试了许多不同的解决方案来使此代码在DOM加载后运行，但似乎没有任何效果。

我尝试了将JavaScript文件放在DOM底部的基本尝试。

我已经尝试过像这样的基本js方法：

  document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    initApplication();
  }

function initApplication() {(... placed code in here ...)}

我尝试过使用jqueries

$( document ).ready(function() { });

我尝试使用html-webpack-plugin将我的JavaScript文件注入HTML

Webpack我缺少什么吗？

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Site</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <button id="new-task">click</button>
    <script src="/assets/app.bundle.js"></script>
  </body>
</html>

app.js

'use strict';

document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    initApplication();
  }
}

function initApplication() {
  onButtonClick();
}

let onButtonClick = function() {
  let taskInput = document.getElementById('new-task');
  taskInput.onclick = alert('hey');
}

最佳答案

例如，我试图运行let taskinput = document.getElementById（'new-task'）;当我在控制台中搜索taskinput变量时，返回Uncaught ReferenceError：未定义taskinput（…）。

首先，Webpack捆绑包中的模块代码在其自己的范围内运行，有效地在一个闭包中运行，而不是在全局范围内运行（您可以使用window访问）。其次，即使您进入控制台并使用let声明变量，例如let a = 1，即使您的控制台在全局（window）范围内运行，如果尝试执行window.a，您也会undefined，因为let变量未附加到window范围。见this

Webpack我缺少什么吗？

如上所述，可能是webpack生成的捆绑包中的代码未在全局范围内运行的事实。

如果要在全局范围内公开变量以便能够使用它，出于调试目的，请在控制台中将其声明为window.variableName。或者，您可以在代码中添加一个断点，方法是在要检出的变量之后添加debugger，而不必将其暴露在全局范围内。