Webpack:仅使用特定配置为IE9加载脚本

时间:2015-06-12 15:09:08

标签: javascript webpack webpack-dev-server

我今天决定尝试使用webpack,现在我遇到了一个问题。

我们的申请与api交谈。 api是可配置的,到目前为止我通过允许我的gulpfile配置选项来确保使用正确的配置选项创建config.js。

我可以用webpack做同样的事情,但我有一种感觉我应该能够更好地解决它。我查看了DefinePlugin。这部分解决了我的问题,因为我能够定义在build .js文件中使用的属性。

但是,由于我使用了跨浏览器请求,我还在index.html中加载xdomain:

   <!--[if lte IE 9]>
    <script>
        var xdomainScript = document.createElement('script');

        xdomainScript.setAttribute('src','xdomain.js');
        xdomainScript.setAttribute('slave', config.apiUrl + '/proxy.html');

        document.head.appendChild(xdomainScript);
    </script>
    <![endif]-->

这就是问题的开始:definePlugin插件只定义了在内置 javascript文件中使用的变量,而不是在HTML中。所以,我可以将这些东西移到一个JS文件中,但是我不知道如何只使用IE9,与webpack结合使用。

任何人都可以启发我吗?

1 个答案:

答案 0 :(得分:2)

Webpack允许您构建一些捆绑包。只需创建另一个具有一个依赖项的入口文件 - 特别是对于IE - 然后在条件注释中使用它。

Webpack配置:

entry: {
    'index': 'pages/index/index.js',
    'index-ie': 'pages/index/index.ie.js' //require('./index.js'); require('./ie-script.js');
},

您的信息页:

<!--[if gt IE 9]>-->
<script src="index.js"></script>  
<!--<![endif]-->
<!--[if lte IE 9]>
<script src="index-ie.js"></script>
<![endif]-->