Eslint是一个JavaScript代码检测工具，用于统一代码风格，还可以检查一些语法错误；而Babel的作用是将ES6语法转换成ES5语法，以此来让更多的浏览器兼容我们的代码。

Eslint

在webpacke集成eslint可以不安装elsint，只要安装Eslint插件就行了

npm install eslint-webpack-plugin --save-dev

然后像配置其他插件那样在plugins数组里添加实例。

plugins: [new HtmlWebpackPlugin(), new CleanWebpackPlugin(), new EslintWebpackPlugin()],

然后就可以在项目根目录创建eslint配置文件.eslintrc.js ，但是我们不需要手动创建，直接使用命令：

npm init @eslint/config
// 然后按照提示选择

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
		// 可以在此配置规则
    "rules": {
			"no-var": "error
    }
}

执行打包即可看到效果

Babel

Babel可以将ES6代码转换成ES5代码，来支持更旧的浏览器，是一个非常常用的库。

要使用babel，首先要先安装babel-loader ，但有babel-loader并不能起什么作用，通常还得加上@babel/core和@babel/preset-env

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

然后配置webpack

{
  test: /\\.m?js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [["@babel/preset-env", { targets: "defaults" }]],
    },
  },
},

在index.js使用比较新的可选链语法，查看效果

// index.js
const obj = {}
console.log(obj?.a)

// bundle.js
(()=>{const o={};console.log(null==o?void 0:o.a)})();