前端开发离不开 webpack 和 Babel，它们分别可以用于打包和转换 JavaScript 代码。Webpack 是一款非常流行的打包工具，可以将多个资源文件（如 JavaScript、CSS、图片、字体等）打包成一个或多个文件，用于优化前端性能。而 Babel 是一个很好的 JavaScript 转义器，可以将新版本的 JavaScript 语法转换成兼容所有浏览器的旧版本语法。本文将介绍如何使用 webpack2 和 Babel7 来进行前端开发，包括最佳实践、深度学习和指导意义，同时提供示例代码。
基础配置
首先，我们需要安装最新版本的 Node.js 和 npm（或者使用 yarn），在命令行中执行以下命令：
$ node -v $ npm -v
确保输出版本号，表明已经成功安装 Node.js 和 npm。接下来，安装 webpack 和 webpack-cli：
$ npm install webpack webpack-cli --save-dev
webpack-cli 是 webpack 的命令行工具，它可以让我们在命令行上使用 webpack 命令。接下来，我们安装 babel-loader 和相关的 preset：
$ npm install babel-loader @babel/core @babel/preset-env --save-dev
babel-loader 是一个 webpack-loader，用于将 ES6+ 代码转换成浏览器兼容的 JavaScript 代码。@babel/core 包含了 Babel 的核心模块，@babel/preset-env 是一个用于转换最新的 JavaScript 语法的 Babel 插件集合。
接下来，我们配置 webpack.config.js 文件：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--这个配置文件将我们的 src/index.js 文件作为打包的入口文件，将打包后的文件输出到 dist/bundle.js 文件中。同时，使用 babel-loader 将代码转换为兼容所有浏览器的 JavaScript 代码。
高级配置
上面的配置是一个简单的 webpack + babel 的配置，对于大部分项目而言已经足够。但如果你想要更加灵活地配置 webpack 和 babel，你可以使用下面的高级配置。
使用 .babelrc 配置 Babel
我们可以将 Babel 的配置放在 .babelrc 文件中，如下所示：
{
"presets": ["@babel/preset-env"]
}这个配置文件告诉 Babel 使用 @babel/preset-env 插件，将代码转换成能够在目标浏览器环境下使用的代码。
使用 babel-polyfill
babel-polyfill 可以让我们在代码中使用最新的 JavaScript 语言特性和 API，它会自动根据配置的目标浏览器环境来只加载必需的 polyfill。我们可以在入口文件中引入 babel-polyfill：
import 'babel-polyfill';
配置开发环境和生产环境
通常我们需要在开发环境和生产环境下使用不同的配置，比如在开发环境下我们需要使用 source map 来方便调试，而在生产环境下则不需要。我们可以使用 webpack-merge 来合并不同的配置，如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ----- - - -------------------------
----- ------------ - -------------------------------
----- --------- - -
----- --------------
-------- -------------------------------
---------- -
------------ ----------------------- --------
--------- -----
----- ----
-
--
----- ---------- - -
----- ------------
--
-------------- - ----- ----- -- -
-- ---------- --- -------------- -
------ ------------------- -----------
-
-- ---------- --- ------------- -
------ ------------------- ------------
-
--上面的配置文件中，定义了两个不同的配置：开发环境（devConfig）和生产环境（prodConfig）。同时，分别定义了不同的 mode 和 devtool，以及不同的 devServer 和 compress 配置项。
最后，我们使用 module.export 函数来导出不同的配置。根据不同的环境变量，使用 webpack-merge 来合并不同的配置项。
示例代码
本文完整代码可以在我的 Github 上获取。
结论
本文介绍了如何使用 webpack2 和 Babel7 进行前端开发，包括基础配置和高级配置。采用最佳实践，使用 .babelrc 配置 Babel 和 babel-polyfill；同时使用 webpack-merge 来配置不同的开发和生产环境。本文涵盖了深度学习和指导意义，同时提供示例代码，希望能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674839d293696b0268eba54a