webpack5配置Eslint和Babel

因为webpack对js的处理比较有限，只能处理Es6语法，导致低版本的IE无法运行，所以要使用Babel将ES6转为ES5。

Babel转换之前，最好校验一下代码的格式，格式无误后，才进行Babel转换。这里要用到Eslint。

npm i eslint-webpack-plugin eslint -D

 Eslint

现有以下较为有名的规则：

• Eslint 官方的规则：eslint:recommended
• Vue Cli 官方的规则：plugin:vue/essential
• React Cli 官方的规则open in new window：react-app

根目录创建配置文件 .eslintrc.js 

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

webpack.config.js中

const ESLintWebpackPlugin = require('eslint-webpack-plugin') 



plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],

在vscode中，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决，因为不需要检查打包后的文件，所以要忽略一下：根目录建.eslintignore文件，里面配置上打包后的文件夹名

# 忽略dist目录下所有文件
dist

Babel

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

 写配置文件：

 根目录创建 babel.config.js

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

webpack.config.js

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

Babel它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等，它没办法处理。

所以要彻底解决兼容性问题，需要用到CoreJs，我的以下文章有详细讲解。

webpack5使用CoreJs解决js代码兼容性_奥特曼坐月子的博客-CSDN博客