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

Webpack: Loading scripts for IE9 only with specific configuration

本文关键字：加载 配置 IE9 脚本 Webpack      更新时间：2023-09-26

我决定今天尝试webpack，现在被一个问题困住了。

我们的应用程序与 API 对话。该 api 是可配置的，到目前为止，我一直在通过允许我的 gulpfile 使用配置选项来做到这一点，这将确保使用正确的配置选项创建配置.js。

我可以对 webpack 做同样的事情，但我有一种感觉，我应该能够更漂亮地解决它。我已经研究了DefinePlugin。这部分解决了我的问题，因为我能够定义要在构建.js文件中使用的属性。

但是，由于我使用的是跨浏览器请求，因此我也在索引中加载了 xdomain.html：

   <!--[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结合使用。

谁能开导我？

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]-->
相关文章：