Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。
在开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

针对 js 兼容性处理，我们使用 Babel 来完成
针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理。

1.Eslint

Eslint是可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能。我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

创建Eslint配置文件
在项目根目录创建文件- .eslintrc.js，这个配置文件内主要有以下几个部分

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

parserOptions 解析选项有以下几个部分

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

rules 具体规则

（1）“0”或者“off”，代表关闭规则；（2）“1”或者“on”，代表开启规则，级别是警告，并不会导致程序退出；（3）“2”或者“error”，代表开启规则，级别是错误，会导致程序退出。

extends 继承

一个一个去写配置规则是相当不方便的，我们可以直接继承一些现有的成熟规则。

在webpack中使用eslint

首先要下载包，包括eslint 和 eslint-webpack-plugin

npm i eslint-webpack-plugin eslint -D

创建eslint配置文件，并且加入具体的配置项

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

接着要在webpack配置文件中用到eslint配置

此外还可以创建.eslintignore文件，来设置eslint忽略目录

2.Babel

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

创建babel配置文件

配置文件由很多种写法：

babel.config.*：新建文件，位于项目根目录
- babel.config.js
- babel.config.json
.babelrc.*：新建文件，位于项目根目录
- .babelrc
- .babelrc.js
- .babelrc.json
package.json 中 babel：不需要创建文件，在原有文件基础上写

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

配置介绍

创建一个babel.config.js文件，里面的主要项目就是预设

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

预设简单理解：就是一组 Babel 插件, 扩展 Babel 功能

@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设

在webpack使用babel

下载好依赖包

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

创建babel.config.js文件，并写入配置

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

在webapck配置文件中设置好

【webpack】6.处理JS资源

1.Eslint

2.Babel