在前端开发中，常常需要使用 Babel7 和 webpack4 来编译和打包项目代码。本文将详细介绍如何配置最新版本的 Babel7 和 webpack4，包括安装和使用以及一些实际示例代码。
安装 Babel7 和 webpack4
安装 Babel7
在开始配置 Babel7 之前，需要先安装 Node.js，这里暂不再赘述。安装完成之后，在命令行中输入以下代码安装 Babel7：
--- ------- ---------- ----------- ---------- -----------------
这里需要说明的是，Babel7 的核心库是 @babel/core，其余的库是 @babel/cli、@babel/preset-env，其中 @babel/preset-env 是预设库，可以根据浏览器或 Node.js 的版本来自动编译。
安装 webpack4
安装 webpack4 同样需要使用 npm 命令，在命令行中输入以下代码安装：
--- ------- ---------- ------- ----------- ------------------
这里需要说明的是，webpack-dev-server 是 webpack4 的开发服务器，可以实时编译和加载代码。
Babel7 和 webpack4 配置
有了以上两个库的基础，我们就可以开始配置 Babel7 和 webpack4 了。在配置之前，先新建一个文件夹，用于存放项目文件。
在项目文件夹下，新建一个名为 babel.config.js 的文件，并输入以下代码：
-------------- - -
-------- -
-
-------------
-
-------- -
----- -----
-------- -----
------- -----
------- ------
-
-
-
-
--这里使用了 @babel/env 预设，指定了项目运行的浏览器或 Node.js 的版本，以上代码指定了 Edge、Firefox、Chrome 和 Safari 版本的最低要求。
接下来，新建一个名为 webpack.config.js 的文件，并输入以下代码：
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------------ --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--以上代码指定了项目的核心配置，包括 mode、entry、output、devServer 等参数，其中 module.rules 指定了编译 JavaScript 时使用的 loader。
示例代码
为了更好地理解以上配置，这里提供一个简单的示例代码，用于演示 Babel7 和 webpack4 的实际应用。
在项目文件夹下，新建一个名为 src 的文件夹，并在其中新建一个名为 index.js 的文件，输入以下代码：
----- ----- - ---- -- ------- ---------- ----------------------------
以上代码使用了 ES6 的箭头函数，并打印了一个简单的字符串信息。
接下来，在命令行中输入以下代码启动 webpack-dev-server：
--- ------------------ ------
这里需要说明的是，在没有全局安装 webpack-dev-server 的情况下，需要使用 npx 命令启动。
启动之后，就可以在浏览器中查看自己的应用了。
结论
通过本文的介绍，相信大家已经了解了 Babel7 和 webpack4 的最新配置方法，包括安装和使用以及一些实际示例代码的演示。希望本文能对大家在前端开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671073285f551281026b2543