使用 Webpack 时动态注入脚本标签

Question

我以前完全按照 Facebook tells us to do it:

的方式注入 Facebook SDK

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

它过去工作正常，加载：

https://connect.facebook.net/en_GB/all.js

但我现在将我的项目更改为使用 webpack，但该解决方案不再有效。现在，当该代码运行时，它会在我的页面中添加一个新的 <script> 标记（就像以前一样）：

<script id="facebook-jssdk" src="//connect.facebook.net/en_GB/all.js"></script>

但是如果我检查浏览器中的网络选项卡，而不是请求：

https://connect.facebook.net/en_GB/all.js

正在请求：

data:application/javascript;base64,RkI9e2dldExvZ2luU3RhdHVzOmZ1bmN0aW9uKCl7fSxhcGk6ZnVuY3Rpb24oKXt9LHVpOmZ1bmN0aW9uKCl7fSxFdmVudDp7c3Vic2NyaWJlOmZ1bmN0aW9uKCl7fX0sVUlTZXJ2ZXI6e30sWEZCTUw6e3BhcnNlOmZ1bmN0aW9uKCl7fX0saW5pdDpmdW5jdGlvbigpe30sX19ub1N1Y2hNZXRob2RfXzpmdW5jdGlvbigpe319Ow==

这是此代码的 base64：

FB={getLoginStatus:function(){},api:function(){},ui:function(){},Event:{subscribe:function(){}},UIServer:{},XFBML:{parse:function(){}},init:function(){},__noSuchMethod__:function(){}};

这显然不是我想要的，我的 fbAsyncInit 函数从未被调用过。我不明白 webpack 是如何干扰这个的，动态注入脚本标签不应该与 webpack 有任何关系。我确实在使用 webpack 开发服务器插件，也许它正在拦截请求？无论如何，添加 webpack 并开始使用 webpack dev server 是我唯一改变的事情。

Answer 1

本来我以为是 Webpack Dev Server 以某种方式拦截了请求，但最终是浏览器扩展 (Ghostery) 拦截了它。如果你有同样的问题尝试禁用扩展。

使用 Webpack 时动态注入脚本标签

Dynamically injecting script tag while using Webpack

facebook-javascript-sdk

webpack