Getting Webpack 2 to support IE8

Question

I want to use Webpack 2 in a large project which must still support IE8.

I've installed babel-preset-env so I can easily deprecate any IE < 11 in future, one by one, once each of the browsers becomes unsupported by this project.

According to the babel-preset-env readme "If you are targeting IE 8 and Chrome 55 [babel-preset-env] will include all plugins required by IE 8 since you would need to support both still."

As I understand it, I also need to install babel-polyfill mostly for its IE5 shim, but also for its polyfills for ES6 and 7 features that I may wish to use.

However having installed these things, my code still falls over on IE8 (in Browserstack) at the point where Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); is first run. A function I thought was getting 'fixed' by the shims.

Is it not getting shimmed properly? Have I missed out a step?

Answer 1

I had the same problem before and here is what I did to solve.

In es6 features,

a class can define a property with get and set to encapsulate a field.

but it is not woroking on IE8.

because the defineProperty method is not supported see the docs,

so we changed the whole code pattern to like below

let val1;

class className {

    methodName() {
        this.val2 = 'test';
        //code here
    }

    getVal1() {
        return val1;
    }

    setVal1(_val1) {
        val1 = _val1;
    }

    getVal2() {
        return this.val2;
    }

    setVal2(_val2) {
        this.val2 = _val2;
    }
}

module.exports = className;

and I recommend that adding 'es3ify' see the link,github es3ify to your webpack build for IE7/8