前言
现代 Web 应用程序的开发已经离不开 Babel 和 Webpack 了。Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转换为向后兼容的 JavaScript 代码，Webpack 是一个模块打包器，可以将多个 JavaScript 文件打包成一个文件，提高应用程序的性能和可维护性。本文将介绍如何使用 Babel 7 和 Webpack 4 构建现代 Web 应用程序。
安装和配置 Babel
使用 Babel 7，需要先安装 @babel/core 和 @babel/preset-env，可以使用以下命令：
npm install --save-dev @babel/core @babel/preset-env
然后在项目的根目录下创建 .babelrc 文件，并配置以下内容：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- -
-- ----
----- - ---------
-
-
-
-
-
-这里的 targets 属性指定了需要支持的浏览器版本，可以根据实际需求进行更改。
安装和配置 Webpack
使用 Webpack 4，需要先安装 webpack 和 webpack-cli，可以使用以下命令：
npm install --save-dev webpack webpack-cli
然后在项目的根目录下创建 webpack.config.js 文件，并配置以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--这里的 entry 属性指定了应用程序的入口文件，output 属性指定了打包后的文件名和路径，module 属性中的 rules 属性指定了如何处理 JavaScript 文件。
需要注意的是，需要安装 babel-loader，可以使用以下命令：
npm install --save-dev babel-loader
使用 Babel 和 Webpack
在项目的根目录下创建 src 文件夹，并在其中创建 index.js 文件，可以使用 ES6+ 语法编写代码：
const message = 'Hello, World!'; console.log(message);
然后使用以下命令进行打包：
npx webpack
打包后的文件将存储在 dist 文件夹中，可以在浏览器中打开 index.html 文件，查看控制台输出的内容。
结论
使用 Babel 7 和 Webpack 4 可以轻松构建现代 Web 应用程序，本文介绍了如何安装和配置 Babel 和 Webpack，并使用示例代码演示了如何使用 Babel 和 Webpack。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675c0963a4d13391d8fd6395