【Webpack--00802】配置Babel语法兼容

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问 作者个人博客网站：sam9029.asia—Webpack入门笔记

---

Babel

官方文档 https://www.webpackjs.com/loaders/babel-loader#root

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

安装

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

• babel-loader：用于在 webpack 构建过程中将 JavaScript 文件从 ES6+转换为 ES5，以便在旧版浏览器中运行。
• @babel/core：这是 Babel 编译器的核心包，提供转译 JavaScript 代码的功能。
• @babel/preset-env：这是 Babel 的一个预设，用于将 ES6+代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器中运行。

配置文件

配置文件由很多种写法：

• babel.config.*
  

  ：新建文件，位于项目根目录

  • babel.config.js
  • babel.config.json

• .babelrc.*
  

  ：新建文件，位于项目根目录

  • .babelrc
  • .babelrc.js
  • .babelrc.json

• package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

babel.config.js基础配置

// babel.config.js
module.exports = {
  // 预设
  presets: ["@babel/preset-env"],
};

webpack.config.js 配置 Babel

• 配置在 loader 之中

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
};

• 完整 webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      // ... 其他配置
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    // ... 其他配置
  ],
  mode: "development",
};

原文地址：https://blog.csdn.net/m0_61486963/article/details/142315784

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！