随着前端开发的不断发展，JavaScript 的新特性也不断涌现。ES7/ES8/ES9 这些新特性也逐渐得到了更广泛的应用。但是，在实际开发中，还有许多浏览器无法兼容的新特性。怎么办呢？这时，就需要使用 webpack 这样的打包工具，通过相关配置，使得代码能够在不同浏览器中顺利运行。下面，我们将介绍如何配置 webpack 来达到这个目的。
1. 安装依赖
首先，我们需要安装一些依赖项，这些依赖项可以让我们使用最新的 ECMAScript 特性，而不用担心兼容性问题。
--- ------- ---------- ----------- ----------------- ------------
这里，我们使用了 @babel/core、@babel/preset-env 和 babel-loader 三个依赖项。其中，@babel/core 是一个核心库，@babel/preset-env 是一个 babel 插件，而 babel-loader 则是在 webpack 中使用 babel 的一个 loader。
2. 配置 Babel
接下来，我们需要配置一下 babel。在根目录下创建一个名为 .babelrc 的文件，并在其中添加如下配置：
- ---------- --------------------- -
这样配置的意思是说，我们要使用 @babel/preset-env 插件来识别我们所使用的 ECMAScript 特性，并将其转换为兼容性更好的代码。
3. 配置 webpack
接下来，在 webpack 配置文件中，我们需要添加 babel-loader 的配置。将下面这段代码添加到 module 中：
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- --------------
-
-
-
-这里的作用是说，当 webpack 遇到 .js 文件时，使用 babel-loader 进行转换。需要注意的是，我们在这里排除了 node_modules，因为我们并不需要对第三方模块进行转换。
4. 配置 polyfill
在实际开发中，除了新特性的兼容性问题之外，还有一些 API 并没有被所有浏览器所支持。这时，我们需要使用 polyfill，也就是填充器，来解决这个问题。
首先，我们需要安装 core-js 这个依赖项：
--- ------- ------ -------
然后，在入口文件中，添加以下代码：
------ ----------------- ------ ------------------------------
这里的作用是说，我们需要引入 core-js 中的 polyfill，使其可以填充浏览器不支持的新 API。
5. 示例代码
最后，我们来看一个实例代码。假设我们有一个 app.js 文件，其中使用了异步函数，我们需要使得这个异步函数能够在兼容性更差的浏览器中运行。
首先，我们在 package.json 中添加如下配置：
--------------- - ----- - ---------- -- --- -
这里的意思是说，我们支持最近两个浏览器版本以及使用人数大于 1% 的浏览器。
接着，在 webpack.config.js 中，添加如下配置：
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- --------------
-
-
-
-
-- ---
-然后，在 .babelrc 中添加如下配置：
- ---------- --------------------- -
最后，在入口文件中添加如下代码：
------ ----------------- ------ ------------------------------ ----- -------- ----- - ----- ------------------------ - ------
这样就可以解决异步函数在老浏览器中的兼容性问题了。
6. 总结
通过上述步骤，我们可以很容易地配置 webpack 来实现 ES7/8/9 的兼容性。总的来说，我们需要安装相关依赖，配置 babel 和 webpack，同时引入 polyfill，最终就可以解决兼容性的问题了。
希望这篇文章对大家有所帮助，也希望大家能够在实际开发中灵活运用 webpack，为了前端的发展，继续努力学习！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650177ca95b1f8cacdf2f5a1