通过 Webpack 5 构建后，应用程序停止在 Internet Explorer (IE11) 上工作答案

【问题标题】：After build via Webpack 5 app stoped working on Internet Explorer (IE11)通过 Webpack 5 构建后，应用程序停止在 Internet Explorer (IE11) 上工作
【发布时间】：2020-10-22 08:53:12
【问题描述】：

正如在 Webpacks 5.0 发布博客文章中宣布的那样，在对 webpack.config.js 进行一些小调整后，构建仍然可以在大多数浏览器中运行。

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

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

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

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

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

【问题讨论】：

感谢@YuZhou 和@arseneyr。两个答案都有效，但在我的场景中，我更喜欢使用 target:['web','es5'] 的解决方案，因为它将所有构建相关信息保存在一个地方。

标签： javascript internet-explorer webpack webpack-5

【解决方案1】：

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

默认情况下，webpack 的运行时代码使用 ES2015 语法来构建更小的包。如果您的构建目标环境不支持此语法（如 IE11），您需要设置 target: ['web', 'es5'] 以恢复为 ES5 语法（如果目标环境是浏览器，则为'web'）。

所以你可以尝试设置：

target: ['web', 'es5']

然后它将代码转换为 ES5。

【讨论】：

【解决方案2】：

您可以使用 output.environment 手动配置 webpack 运行时中可用的功能。

但是，by default webpack 5 将尊重它找到的任何 browserslist 条目，并将运行时设置为仅使用目标浏览器中可用的那些功能。您可以使用here 中的任何一种方法来配置要定位的浏览器，但最简单的方法是在您的package.json 中指定一个键：

"browserslist": "ie 11"

【讨论】：

谢谢，webpack 忽略了 babel IE11 配置。我猜 webpack 的 runtime 和 babel 没有任何关系，它是一个单独的东西。