处理js资源

es6,只能编译js中es模块，不能编译其他语法，导致js不能再ie等浏览器运行。

1. 针对js兼容性处理，使用eslint来完成
2. 针对代码格式，使用babel做代码兼容性处理 先完成eslint,检查代码格式无误后，再由babel做代码兼容性处理

Eslint

用来检查js和jsx语法的检查工具 关键是写eslint配置文件，里面写上各种rules规则，将来运行eslint时就会以写的规则对代码进行检查

1. 配置文件 .eslintrc.* 新建文件，位于项目跟目录下 .eslintrc .eslintrc.js .eslintrc.json 区别在于配置格式不一样 package.json中eslintConfig:不需要创建文件，在原有文件基础上写
2. 具体配置 以.eslintrc.js为例

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
}

parserOptions选项解析

parserOptions: {
  ecmaVersion: 6, // es语法版本
  sourceType: "module", // es模块化
  ecmaFeatures: { // es其他特征
    jsx: true  // 如果时react需要开启jsx语法
  }
}

rules具体规则
"off"或者0-关闭规则
"warn"或者1-开启规则，使用警告级别的错误：warn(不会导致程序退出)
"on"或者2-开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出) 红色的错误
eslint.bootcss.com/docs/rules/

extends 可以继承extends现有规则 继承的规则需要下载，如果是官方规则不需要下载 修改继承的规则可在rules里写

 // 继承其他规则
  extends: ["react-app"],
  rules:{
    // 可以覆盖extends继承的规则
  }

使用eslint对代码进行校验，4是loader,5是plugin
插件的使用都需要引入，所有的插件都是构造函数，所以是new 调用 下载eslint-webpack-plugin,require引入，在plugin中配置

const ESLintPlugin = require('eslint-webpack-plugin');
plugins: [
    new ESLintPlugin({
      // 检测哪些文件，对打包好的文件不会校验
      context: path.resolve(__dirname, "src")
    })
  ],

本地创建.eslintrc.js文件，否则会报错
npx webpack执行webpack

eslint忽略文件

.eslintignore在跟目录下创建文件，这是查看打包完的文件不会进行校验