在前端开发中，我们经常会使用到 webpack 进行模块打包和构建。而对于使用 ES6 或者更高版本的 JavaScript 进行开发的人来说，我们会使用 Babel 将代码转换为 ES5，以兼容更多浏览器。这时，我们就需要将 Babel 和 webpack 结合使用，来达到最佳的构建效果。
在 webpack 中，我们需要使用 babel-loader 这个插件来将 JS 文件转换为 ES5 代码。但是由于 babel-loader 配置参数很多，有时候很难搞懂该如何配置，下面就为大家详细讲解 webpack 中的 babel-loader 串联通开启指南。
安装和配置 babel-loader
首先，我们需要安装 babel-loader 和 babel-core 两个依赖包。在命令行中运行如下命令：
npm install babel-loader babel-core --save-dev
安装完成之后，我们就可以在 webpack 的配置文件中配置 babel-loader 了。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------- -- ---- --- --
-------- --------------- -- -- ------------ --
---- -
------- --------------- -- -- ------------
-------- -
-------- - -- --
-
-------------------- -- -- --- --
-
-------- -
--------- ------ - ---------- --- -- --- -- -------
-
-
-
--
-------- - -- --
---------------------------------- -- ----------------------
-------------------------------------------- -- -- ----------- --- --------- --
-
-
-
-
-
-
-上述配置内容较为详细，我们来分析一下。
首先，我们使用 rules 数组来定义我们如何处理不同类型的模块。其中，test 字段是一个正则表达式，用来匹配需要处理的文件类型。这里我们使用 /.js$/ 这个正则表达式来匹配所有 .js 文件。
然后，我们使用 exclude 字段来排除不需要处理的文件夹，这里我们排除了 node_modules 文件夹。
接下来，我们使用 use 字段来定义使用什么 loader 处理这个模块。我们在 use 字段中配置了 babel-loader，并在 options 中定义了一些参数。
在 options 的 presets 字段中，我们定义了需要使用哪些预设来转换代码。这里我们使用了 @babel/preset-env 这个预设，它会根据你浏览器的版本来进行具体的转换。
在 options 的 plugins 字段中，我们定义了需要使用哪些插件来优化代码。这里我们使用了两个插件，分别用于抽取公共代码和转换 async/await 语法为 generator 语法。
示例代码
最后，我们来看一个示例代码，让大家更加深入理解 babel-loader 的使用。
index.js：
-- -------------------- ---- -------
----- --- - --- -- ---
----- --------- - ----------- -- --- - -----
-----------------------
----- -------- ------- -
----- --- --------------- -- -
------------- -- -
----------
-- ------
---
---------------------
-
--------webpack.config.js：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
-------- -
--------- ------ - ---------- --- -- ---
-
-
-
--
-------- -
----------------------------------
--------------------------------------------
-
-
-
-
-
-
--index.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
-------
------
------- ------------------------------
-------
-------在命令行中运行 npm run build，之后我们就可以在浏览器中访问 index.html 来查看我们的代码效果了。
结论
使用 Babel 和 webpack 结合使用，可以帮助我们更好地管理和构建前端项目，让我们的代码具备更好的可移植性和可维护性。深入理解 babel-loader 的配置参数，可以帮助我们更好地优化和调试代码，让我们的代码功能更加强大和稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f32185e1e8e99bfaf40c47