在现代前端开发中，Babel 和 Webpack 是最常用的工具之一。Babel 可以将 ES6+ 的代码转换成浏览器能够识别的 ES5 代码，而 Webpack 可以将多个 JavaScript 文件打包成一个文件，并且支持代码分割和动态加载等功能。本文将介绍如何使用 Babel 7 和 Webpack 4 搭配使用，并给出示例代码。
安装
首先，需要安装 Babel 和 Webpack 的相关依赖。可以使用 npm 进行安装：
npm install babel-core babel-loader babel-preset-env webpack webpack-cli --save-dev
配置 Babel
先配置 Babel。在项目根目录下创建一个名为 .babelrc 的文件。该文件指定了 Babel 转换 ES6+ 代码的方式。这里使用 babel-preset-env 插件转换所有 ES6+ 代码：
{
"presets": ["env"]
}配置 Webpack
配置 Webpack 需要创建一个名为 webpack.config.js 的文件。该文件指定了 Webpack 将 JavaScript 文件打包成一个文件的规则。
下面是一个简单的配置文件，它定义了输入文件 src/index.js 和输出文件 dist/bundle.js。在输入文件中，通过 import 引入两个 ES6 的模块 sum.js 和 multiply.js，并进行了计算。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--上面的配置中，module 属性是一个数组，每一个对象都是一个规则，用于识别不同的文件类型。这里只有一个规则，它使用了 Babel 的 loader，用于将 ES6+ 代码转换成 ES5 代码。exclude 属性表示不需要处理的文件夹。
示例代码
下面给出一个示例代码：
import sum from './sum'; import multiply from './multiply'; console.log(sum(1, 2)); // 3 console.log(multiply(3, 4)); // 12
其中，sum 和 multiply 分别是两个 ES6 模块文件：
-- -------------------- ---- ------- -- ------ ------ ------- -------- ------ -- - ------ - - -- - -- ----------- ------ ------- -------- ----------- -- - ------ - - -- -
总结
本文介绍了如何使用 Babel 7 和 Webpack 4 进行前端开发，并给出了示例代码。Babel 和 Webpack 是常用的前端开发工具，掌握它们的使用方法可以提高代码的兼容性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465673a968c7c53b0618b3c