Webpack: Loading scripts for IE9 only with specific configuration

Question

I decided to try out webpack today, and am now stuck with a question.

Our application talks to an api. The api is configurable, and so far I've been doing that by allowing a config option to my gulpfile which will ensure a config.js is created with the right configuration options.

I could do the same with webpack, but I have a feeling I should be able to solve it more beautifully. I've looked into the DefinePlugin. This partly solves my problem, as I'm able to define properties for use in the build .js file.

However, since I'm using cross browser requests, I'm also loading xdomain right within the index.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]-->

This is where the problem starts: the definePlugin plugin only defines variables for use in the built javascript file, not in the HTML. So, I could move this stuff to a JS file, but then I don't know how to make it IE9 only, in combination with webpack.

Can anyone enlighten me?

Answer 1

Webpack allow you to build a few bundles. Just create another entry file with one more dependency - specially for IE - and then just use it in your conditional comments.

Webpack configuration:

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

Your page:

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