Webpack中之babel-loader作用

---

前言

babel-loader的作用和基本使用

---

一、babel-loader是什么？

在编写 js 代码时，经常需要使用一些 js 中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。babel 就是这样一个工具，可以将新的 js 语法转换为旧的 js，以提高代码的兼容性。我们如果希望在 webpack 支持 babel，则需要向 webpack 中引入 babel 的 loader

二、使用步骤

1.安装依赖

代码如下（示例）：

npm install -D babel-loader @babel/core @babel/preset-env

2.配置信息

代码如下（示例）：

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"]
                }
            }
        }
    ]
}

---

总结

babel-loader 是 webpack 的一个 loader，它允许你使用 Babel 和 webpack 一起工作。Babel 是一个广泛使用的 JavaScript 编译器，可以将 ES6+ 代码转换为向后兼容的 JavaScript 语法，以便在当前和旧版本的浏览器和环境中运行。