Javascript 无法单击网页包开发服务器屏幕内的任何内容

我们有一个React js站点，它使用webpack dev服务器组件。当我加载站点的常规版本时，一切似乎都正常工作。问题是，当我加载webpack dev服务器版本时，我无法单击屏幕上的任何元素。 经过一点调试后，看起来这是由覆盖iframe的-index设置为-1引起的

似乎是同一个问题，但他们将“inline”属性更改为true的解决方案并不能解决任何问题

---

还有其他人有过类似的问题吗？

我遇到同样的问题，原因完全相同

我关注了你的链接，看起来他们的webpack dev服务器配置处理方式与普通webpack不同

为了使webpack dev服务器在

内联

模式下运行，webpack配置应具有类似的功能：

webpackConfig.devServer = {
  inline: true
}

据我所知，webpack dev服务器将把它的条目从

localhost:8080/webpack dev server

更改为

localhost:8080/

，并在绑定的JavaScript文件中提供实时重新加载脚本

---

在我的例子中，我希望我的示例页面（

~/index.html

）是交互式的。无论

inline

模式设置如何，我都可以转到

localhost:8080/index.html

。但是，如果启用了

inline

模式，页面会自动重新加载源代码更改（所有通知都通过开发人员控制台提供）

出于完全相同的原因，我遇到了同样的问题

我关注了你的链接，看起来他们的webpack dev服务器配置处理方式与普通webpack不同

为了使webpack dev服务器在

内联

模式下运行，webpack配置应具有类似的功能：

webpackConfig.devServer = {
  inline: true
}

据我所知，webpack dev服务器将把它的条目从

localhost:8080/webpack dev server

更改为

localhost:8080/

，并在绑定的JavaScript文件中提供实时重新加载脚本

---

在我的例子中，我希望我的示例页面（

~/index.html

）是交互式的。无论

inline

模式设置如何，我都可以转到

localhost:8080/index.html

。但是，如果启用了

inline

模式，页面会自动重新加载源代码更改（所有通知都通过开发人员控制台提供）

这个奇怪的bug正在影响使用nextjs 7.0.2版的项目

设置网页包配置无效

我们用这个黑客软件修复了它：

if (process.env.NODE_ENV !== 'production' && typeof window !== undefined) {
  // Select the node that will be observed for mutations
  var targetNode = window.document.getElementsByTagName('body')[0];

  // Options for the observer (which mutations to observe)
  var config = { childList: true, subtree: true };

  // Callback function to execute when mutations are observed
  var callback = function(mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        var iframe = document.getElementsByTagName('iframe')[0];
        if (iframe && iframe.style.zIndex > -1) {
          iframe.style.zIndex = Math.min(-iframe.style.zIndex, -2);
        }
      }
    }
  };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config);

  // Later, you can stop observing
  // observer.disconnect();
}

---

这个奇怪的bug正在影响使用nextjs 7.0.2版的项目

设置网页包配置无效

我们用这个黑客软件修复了它：

if (process.env.NODE_ENV !== 'production' && typeof window !== undefined) {
  // Select the node that will be observed for mutations
  var targetNode = window.document.getElementsByTagName('body')[0];

  // Options for the observer (which mutations to observe)
  var config = { childList: true, subtree: true };

  // Callback function to execute when mutations are observed
  var callback = function(mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        var iframe = document.getElementsByTagName('iframe')[0];
        if (iframe && iframe.style.zIndex > -1) {
          iframe.style.zIndex = Math.min(-iframe.style.zIndex, -2);
        }
      }
    }
  };

  // Create an observer instance linked to the callback function
  var observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config);

  // Later, you can stop observing
  // observer.disconnect();
}