1. 初识`Babel`

Babel是一个JavaScript 编译器。主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
它在webpack中主要是已loader的形式使用的

配置文件:

配置文件由很多种写法：
- babel.config.*：新建文件，位于项目根目录
  - babel.config.js(常用)
  - babel.config.json
- .babelrc.*：新建文件，位于项目根目录
  - .babelrc
  - .babelrc.js
  - .babelrc.json
package.json 中 babel：不需要创建文件，在原有文件基础上写

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

具体配置:

我们以 babel.config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

presets 预设
- 简单理解：就是一组 Babel 插件, 扩展 Babel 功能
  - @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  - @babel/preset-react：一个用来编译 React jsx 语法的预设
  - @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

在 `Webpack` 中使用

首先下载包

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

定义 Babel 配置文件(在根目录下新建babel.config.js)

module.exports = {
  //智能预设,使其能够编译ES6的语法
  presets: ["@babel/preset-env"],
};

配置webpack.config.js

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题
// 引入eslint
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "dist"),//绝对路径
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        clean: true,//(自动清空上次打包内容) 原理:在打包前,将path整个目录内容清空,在进行打包
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            },
            // 4.处理字体资源
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",//这里的是改成"asset/resource"
                generator: {
                  filename: "static/media/[hash:8][ext][query]",
                },
            },
            // 配置babel**********************************************************
            {
                test: /\.js$/,//检查匹配以js结尾的文件
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
            // *******************************************************************
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        // eslint配置
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录(src目录下的所有文件的语法)
            context: path.resolve(__dirname, "src"),
          }),
    ],
    // 模式
    mode:"development"//开发模式
};