Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，可以将多个模块打包成一个文件，使得前端开发变得更加高效。Webpack 本身只能处理 JavaScript 文件，而对于一些其他的文件，比如：CSS、图片等，就需要使用 Loader 进行处理。其中之一常用的是babel-loader。
babel-loader 是一个能够将 ES6/7/8 的代码转化成 ES5 的 loader，它使用了 Babel 和 Webpack 进行编译工作，并且可以与其他的 Loader 配合使用。在使用 babel-loader 之前需要先安装 Babel 相关依赖包：@babel/core、@babel/cli、@babel/preset-env、@babel/preset-react 等。
安装及基本配置
安装 babel-loader：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
在 webpack.config.js 配置文件中添加 loader 配置：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-以上配置完成后，当遇到 .js 后缀的文件时，Webpack 自动使用 babel-loader 进行编译。
babel-loader 主要参数
options.preset
@babel/preset-env：根据目标浏览器或运行环境自动将 ES6/7/8 的代码转换成 ES5。@babel/preset-flow：移除 Flow 代码（一个用于静态类型检查的 JavaScript 扩展语言）。@babel/preset-react：将 JSX 代码转换成普通的 JavaScript 代码。@babel/preset-typescript：将 TypeScript 代码转换成 JavaScript 代码。@babel/preset-stage-x：某些新加入 ECMAScript 规范的语法，可能需要使用此插件。
options.plugins
可以对具体的语法进行转换，比如一些 ES 新特性的浏览器兼容性问题，这些问题可以被 babel-plugin 处理，如：
// ES6箭头函数和ES7的语法 const sum = (a, b) => a ** b
上述语法可以使用 @babel/plugin-transform-runtime 插件进行转换：
// 在 .babelrc 文件增加以下配置
{
"plugins": ["@babel/plugin-transform-runtime"]
}其他参数
cacheDirectory：默认值为 false，如果该值被设置为 true，则在使用同样的配置编译同样的代码时，会自动使用缓存，加快打包速度。
示例代码
-- -------------------- ---- -------
-- --------
----- ---- - -----
------------------ ---------
-- -----------------
-------------- - -
-- -------
------- -
------ --
----- --------
-------- ---------------
------- ---------------
-------- -
-------- ---------------------
-
--
-
-可以通过编译后的代码可知，ES6 语法已经被转换成了 ES5：
// Compiled code
var name = 'ES6';
console.log('Hello ' + name);总结
使用 babel-loader 时，需要配置相应的 Babel 插件以及常规的 loader 配置，从而将 ES6 代码转换为 ES5，以达到兼容性的保证。同时，可以根据实际需求灵活配置 babel-loader 的 options 参数，提高代码的转换效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c5489968c7c53b076a96d