Webpack:仅使用特定配置为 IE9 加载脚本
Webpack: Loading scripts for IE9 only with specific configuration
我今天决定试用 webpack,但现在遇到了一个问题。
我们的应用程序与 api 对话。 api 是可配置的,到目前为止,我一直在通过允许我的 gulpfile 的配置选项来做到这一点,这将确保使用正确的配置选项创建 config.js。
我也可以用webpack做同样的事情,但我觉得我应该可以更漂亮地解决它。我调查了 DefinePlugin。这部分解决了我的问题,因为我能够定义在构建 .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 插件只定义了在 built javascript 文件中使用的变量,而不是在 HTML 中使用的变量。所以,我可以将这些东西移动到一个 JS 文件中,但我不知道如何将它与 webpack 结合使用,使其仅适用于 IE9。
谁能赐教一下?
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]-->
我今天决定试用 webpack,但现在遇到了一个问题。
我们的应用程序与 api 对话。 api 是可配置的,到目前为止,我一直在通过允许我的 gulpfile 的配置选项来做到这一点,这将确保使用正确的配置选项创建 config.js。
我也可以用webpack做同样的事情,但我觉得我应该可以更漂亮地解决它。我调查了 DefinePlugin。这部分解决了我的问题,因为我能够定义在构建 .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 插件只定义了在 built javascript 文件中使用的变量,而不是在 HTML 中使用的变量。所以,我可以将这些东西移动到一个 JS 文件中,但我不知道如何将它与 webpack 结合使用,使其仅适用于 IE9。
谁能赐教一下?
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]-->