通过 Webpack 5 构建后，应用程序停止在 Internet Explorer (IE11) 上运行

Question

正如 Webpacks 5.0 发布博客中所宣布的那样 post 在 webpack.config.js 中进行了一些小的调整后，构建仍然适用于大多数浏览器。

但它在 Internet Explorer (11) 中停止工作，因为生成的输出混合了 ES6 和 ES5，因此与 IE 不兼容（见图）。

因为它实际上导致使用各种 babel 插件无法成功构建，所以我在问自己是否有一种“简单”的方法可以将 ES5 指定为生成的输出。

从 webpack-5 的测试阶段开始，我在 Medium 上发现了一个标志，它似乎不再起作用了。

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

版本 5.x 中是否有一些“webpack 内置方式”将 ES5 作为输出目标？

Answer 1

您可以使用 output.environment.

手动配置 webpack 运行时中可用的功能

然而，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，但最简单的方法是在 package.json:

中指定一个键

"browserslist": "ie 11"

Answer 2

来自webpack guide To v5 from v4，它说：

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

所以你可以尝试设置：

target: ['web', 'es5']

然后它将代码转换为 ES5。

通过 Webpack 5 构建后，应用程序停止在 Internet Explorer (IE11) 上运行

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

javascript

internet-explorer

webpack

webpack-5