webpack5配置eslint

npm i eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import -D

1、eslint 这个必须安装的 

2、eslint-webpack-plugin 用于替代eslint-loader(即将废弃)

3、eslint-config-airbnb-base  支持es6+的语法规范 就不用每一项都去配置了 （为什么使用这个 点击查看）

4、eslint-plugin-import 用于在webpack.json中读取eslintConfig配置项

5、eslint-import-resolver-webpack（如果在webpack.config.js中配置了alias 并且在import时使用了别名需要安装这个）点击查看配置项

6、需要自定义eslint规则 点击查看

// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    mode: "development",
    entry: './src/index.js',
    // devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        compress: true,
        open: false
    },
    output: {
        publicPath: '/',
        // 指定打包后输出的文件名
        filename: 'js/app.[contenthash:10].js',
        // 指定打包后输出的目录
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        alias: {
            # ！！！！！！注意如果配置了此处 要安装步骤5的插件！！！！！！！！ #
            "@": path.resolve(__dirname, 'src')
        }
    },
    module: {
        rules: [

        ]
    },
    plugins: [
        #使用 配置项都可以在eslint-webpack-plugin的github上找到
        new ESLintPlugin({
            fix: true,
            extensions: ['js', 'json', 'coffee'],
            exclude: '/node_modules/'
        }),
    ]
};

// package.json
"eslintConfig": {
    "extends": "airbnb-base",
    #！！！！如果没使用alias下面的不用配置！！！！！
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "webpack.config.js"
        }
      }
    }
  }