javascript - After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Question

As announced in Webpacks 5.0 release blog post build still works in most browsers after a few minor adjustments in webpack.config.js.

But it stopped working in Internet Explorer (11) because the generated output is mixed ES6 and ES5 and therefore incompatible with IE (see image).

As it actually leads to no successful build using a variety of babel plugins I'm asking myself if theres an "easy" way to specify ES5 as the generated output.

From beta phase of webpack-5 I found a flag on Medium which seems not working anymore.

module.exports = {
  output: {
    filename: [name].js,
    ecmaVersion: 5 // <- this flag
  }
}

Is there some "webpack built in way“ in version 5.x to have ES5 as output target?

Answer 1

From the webpack guide To v5 from v4, it says:

By default, webpack's runtime code uses ES2015 syntax to build smaller bundles. If your build targets environments that don't support this syntax (like IE11), you'll need to set target: ['web', 'es5'] to revert to ES5 syntax ('web' if target environment is browser).

So you can try to set:

target: ['web', 'es5']

then it will convert code to ES5.