随着现代 Web 技术的发展，前端开发也变得越来越复杂。ES6 的到来给前端开发带来了很多好处，但是由于浏览器的兼容性问题，我们还需要使用 Babel 这样的工具将 ES6 转换成 ES5，以便在现有的浏览器中使用。本文将介绍如何基于 Webpack 使用 Babel 还原 ES6 的开发现场。
Webpack 和 Babel 的基础知识
Webpack 是一个模块打包工具，它可以将多个模块打包成一个文件，以便在浏览器中使用。Babel 是一个 JavaScript 编译器，它可以将 ES6 代码转换成 ES5 代码，以便在现有的浏览器中使用。
在使用 Webpack 和 Babel 之前，我们需要先了解一些基础知识：
模块
在 Webpack 中，一个模块可以是一个 JavaScript 文件、一个 CSS 文件、一个 HTML 文件或者其他任何类型的文件。每个模块都有自己的作用域，可以导出和导入其他模块中的变量、函数或对象。
Loader
在 Webpack 中，Loader 是用来处理模块的转换的。例如，Babel Loader 可以将 ES6 代码转换成 ES5 代码，CSS Loader 可以将 CSS 文件转换成 JavaScript 代码，Image Loader 可以将图片文件转换成 Base64 编码的字符串。
Plugin
在 Webpack 中，Plugin 是用来扩展 Webpack 功能的。例如，Uglify Plugin 可以压缩 JavaScript 代码，HtmlWebpackPlugin 可以生成 HTML 文件，ExtractTextPlugin 可以将 CSS 文件提取成单独的文件。
使用 Webpack 和 Babel 进行 ES6 开发
下面我们将详细介绍如何使用 Webpack 和 Babel 进行 ES6 开发。
安装 Webpack 和 Babel
首先，我们需要安装 Webpack 和 Babel。可以使用 npm 命令进行安装：
npm install webpack babel-core babel-loader babel-preset-es2015 --save-dev
配置 Webpack
然后，我们需要配置 Webpack。在项目根目录下创建一个 webpack.config.js 文件，输入以下内容：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------
-
-
-
-
-
--这个配置文件告诉 Webpack 将 ./src/index.js 文件作为入口文件，将所有依赖的模块打包成一个 bundle.js 文件并输出到 ./dist 目录下。同时，它也告诉 Webpack 使用 babel-loader 对所有 .js 文件进行转换，并使用 es2015 preset 进行转换。
编写 ES6 代码
现在，我们可以开始编写 ES6 代码了。在 ./src 目录下创建一个 index.js 文件，输入以下内容：
const add = (a, b) => a + b; console.log(add(1, 2));
这个代码使用了箭头函数和 const 关键字，是典型的 ES6 代码。
执行打包命令
最后，我们需要执行打包命令，将 ES6 代码转换成 ES5 代码并打包成一个文件。在命令行中输入以下命令：
webpack
执行完毕后，会在 ./dist 目录下生成一个 bundle.js 文件。打开 index.html 文件，引入这个文件，就可以在浏览器中运行这个 ES6 代码了。
总结
本文介绍了如何基于 Webpack 使用 Babel 还原 ES6 的开发现场。通过使用 Webpack 和 Babel，我们可以愉快地使用 ES6 的新特性，同时也可以兼容旧版浏览器。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bede62add4f0e0ff8650a6