动态注入脚本标记，而使用的WebPack

我用来注入的Facebook SDK正是Facebook的tells us to do it方式：动态注入脚本标记，而使用的WebPack

<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

它正在请求：

数据：应用/ JavaScript的; BASE64，RkI9e2dldExvZ2luU3RhdHVzOmZ1bmN0aW9uKCl7fSxhcGk6ZnVuY3Rpb24oKXt9LHVpOmZ1bmN0aW9uKCl7fSxFdmVudDp7c3Vic2NyaWJlOmZ1bmN0aW9uKCl7fX0sVUlTZXJ2ZXI6e30sWEZCTUw6e3BhcnNlOmZ1bmN 0aW9uKCl7fX0saW5pdDpmdW5jdGlvbigpe30sX19ub1N1Y2hNZXRob2RfXzpmdW5jdGlvbigpe319Ow ==

这是该代码的base64：

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

这显然不是我想要的，我fbAsyncInit功能不会被调用。我不明白webpack如何干扰这一点，动态注入脚本标签不应该与webpack有任何关系。尽管我使用webpack dev服务器插件，也许它拦截了请求？无论如何，添加webpack并开始使用webpack dev服务器是我改变的唯一的东西。

来源

2016-09-26 Hoffmann

最初我以为Webpack Dev Server以某种方式拦截了这个请求，但最终它是一个浏览器扩展（Ghostery）拦截它。如果您遇到同样的问题，请尝试禁用扩展程序。

来源

2016-09-26 14:25:04 Hoffmann

动态注入脚本标记，而使用的WebPack

回答

相关问题