在现代前端开发中，使用 ES6+ 语法已经成为了常态。然而，由于浏览器对于 ES6+ 新特性的兼容性存在差异，为了保证代码的可执行性，我们需要用到 babel 这个工具将我们的代码转换为可以在所有浏览器上执行的 ES5 代码。当我们需要使用 webpack 进行代码打包时，我们可以通过 npm 包 babel-preset-webpack 来方便地集成 babel 和 webpack。
安装
首先，我们需要在项目中安装 babel-loader、babel-preset-env 和 babel-preset-webpack。运行以下命令：
npm install --save-dev babel-loader @babel/preset-env babel-preset-webpack
使用
安装完成后，我们可以在 webpack 的配置文件中进行配置：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ --
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------- -
-------- -
------- -----
--- ----
-
---
----------------------
-
-
-
--
-
-- ---
-在这里我们定义了一个 babel-loader，并添加了两个 preset：@babel/preset-env 和 babel-preset-webpack。@babel/preset-env 用于根据浏览器的兼容性自动添加需要的 polyfill，而 babel-preset-webpack 用于设置 webpack 的配置项。
配置项
我们可以在 babel-preset-webpack 的配置项中设置多个参数。其中比较重要的是：
debug
通过 debug 参数，我们可以开启 babel 的调试模式，在编译时会将转换后的代码输出到控制台中。这样可以方便我们查看代码是否正确转换。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------- -
-------- -
------- -----
--- ----
-
---
------------------------ -
------ ----
--
-
-
-
--
-
-- ---
-transformModules
通过 transformModules 参数，我们可以设置将哪些 node_modules 依赖包转换为 ES5 代码。这个参数应该是一个数组，其中每个元素是需要转换的依赖包的名称。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------- -
-------- -
------- -----
--- ----
-
---
------------------------ -
----------------- -
---------
--------
-
--
-
-
-
--
-
-- ---
-compress
通过 compress 参数，我们可以开启代码压缩。这个参数默认为 false，需要手动设置为 true 才能开启。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------- -
-------- -
------- -----
--- ----
-
---
------------------------ -
--------- ----
--
-
-
-
--
-
-- ---
-示例代码
为了更好地理解，在这里我提供一个示例代码，用于将以下 ES6+ 代码转换为 ES5 代码：
const arr = [1, 2, 3] arr.map(item => item + 1)
在 webpack 的配置文件中，我们可以按照如下方式配置：
-- -------------------- ---- -------
-- -----------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- ---------
--
------- -
------ --
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------- -
-------- -
------- -----
--- ----
-
---
----------------------
-
-
-
--
-
-最终，我们得到了以下 ES5 的代码：
'use strict';
var arr = [1, 2, 3];
arr.map(function (item) {
return item + 1;
});总结
在现代前端开发中，使用 babel 和 webpack 是必须的。而 babel-preset-webpack 这个 npm 包则为我们提供了更为方便地集成 babel 和 webpack 的方式，在配置时给我们带来了很大的便利。通过本篇文章的学习，相信你已经掌握了 babel-preset-webpack 的使用方法，无论是在何种情况下，都可以更加自如地使用 babel 和 webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd881e8991b448dd677