Webpack 如何兼容打包 IE8 浏览器
在前端开发的过程中，Webpack 已经成为了不可或缺的一个工具。它可以帮助我们对前端代码进行打包，优化等一系列操作。然而，在默认情况下，Webpack 并不支持 IE8 浏览器的打包。那么，该如何解决这个问题呢？
首先，我们需要了解一下 IE8 浏览器的一些特殊情况。与现代浏览器不同的是，IE8 浏览器缺乏对一些基础 JavaScript API 的支持，例如 Object.keys()，Array.isArray() 等等。此外，IE8 还不支持常见的 ES6 语法，例如 let 和 const 的声明，箭头函数等，这些都是我们在现代浏览器中常常使用的语法。
因此，为了让我们的前端代码能够在 IE8 浏览器中正常运行，在打包过程中需要考虑到这些问题。具体来说，有以下几个步骤：
1. 配置 babel
为了让我们的代码兼容 IE8，我们需要使用 babel 进行转译。在 Webpack 中，可以通过 babel-loader 进行配置。在配置文件中，我们需要将 preset 设置为 @babel/preset-env，并设置 targets 选项，使其可以向后兼容至 IE8。同时，我们还需要添加 transform-runtime 插件，以使用 babel-runtime 来模拟 ES6 函数。以下是一个示例配置：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- - ----- --- - - - -- ---------- - - ---------------------------------- - ------------------ ------ --------- ------ ---------- ----- -------------- ----- --------------- ------ - - - -展开代码
2. 配置 polyfills
除了配置 babel-loader 之外，我们还需要在代码中引入 polyfills。由于 IE8 不支持的 JavaScript API 在实现上比较简单，所以我们可以使用 polyfill.io 或者 core-js 等库来引入 polyfills。以下是一个使用 polyfill.io 的示例：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- -- --- ----------- ------- --------------------------------------------------------------------------------------- ------- ------ ---- --------------- ------- --------------------------- ------- -------展开代码
3. 配置 UglifyJS
最后，我们需要考虑到在压缩代码时可能会出现的问题。由于 IE8 不支持 eval() 函数，而 UglifyJS 默认会使用 eval() 函数来处理代码，这就导致了在 IE8 中无法正确执行压缩代码。为了解决这个问题，我们需要将 UglifyJS 的输出模式设置为 ascii_only，这样就可以避免使用 eval() 函数。
以下是一个示例配置：
-- -------------------- ---- ------- --- --------------------------------- --------- - --------- ----- -- ------- - ------- ---------- ---- ---------- ---------- -- ------- - ----------- ----- -- ------ ----- ------ --- ----- -- --展开代码
综上所述，Webpack 兼容 IE8 浏览器需要我们进行以下配置：配置 babel-loader，引入 polyfills，配置 UglifyJS。虽然这些操作可能会增加一定的工作量，但是可以大大提高我们的开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b71731306f20b3a63bb7da
