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

依然范特西╮ 提交于 2020-12-15 06:09:01

问题


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).

Generated Code

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?


回答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.




回答2:


You could manually configure the features available in the webpack runtime with output.environment.

However, by default webpack 5 will honor any browserslist entries it finds and set the runtime to only use those features available in your target browsers. You can configure which browsers to target using any of the methods here, but the easiest way is to specify a key in your package.json:

"browserslist": "ie 11"


来源:https://stackoverflow.com/questions/64478671/after-build-via-webpack-5-app-stoped-working-on-internet-explorer-ie11

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!