[JavaScript]Set ESLint to Webpack

It is a premise that ESLint is set.This is a method to execute ESLint when bundled with Webpack.
Please refer to the following article for the setting of ESLint itself.It is installed with Nuxt.js, but it works without change.
[NUXT.JS]How to set up ESLint and Prettier

Installation of eslint-loader

Install eslint-loader from npm.

npm install eslint-loader --save-dev

Set eslint-loader to config

Basically it is as follows.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader:'eslint-loader',
        options: {
          // eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};

However, in the case of webpack, I think that only ESLint is rarely set as a loader.
In that case use is used.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader:'babel-loader',
            options: {
              // option
            }
          },
          {
            loader:'eslint-loader',
            option: {
              // option
            }
          }
        ]
      },
    ],
  },
  // ...
};

The above is when used with babel.
When used together, the order in which they are listed is important.In the above case, the loader will be loaded from eslint.
However, if you want to run eslint-loader before stricter than babel-loader, it is as follows.

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce:'pre',
        test: /.js$/,
        exclude: /node_modules/,
        loader:'eslint-loader',
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader:'babel-loader',
      },
    ],
  },
  // ...
};

enforce:'pre' to ensure execution first.

About options

A brief summary of the options.Please see the eslint-loader page for details.
webpack eslint-loader

cache: type: boolean (default: false)
By using the cache, you can reduce the time required for linting.
eslintPath: type: String (default: eslint)
Specify the eslint directory path.
fix: type: boolean (default: false)
Use the formatter to automatically correct code that don't meet your coding rules.
formatter: type: String | function (default: stylish)
Set the formatter to use.
emitError: type: boolean (default: false)
Always returns an error.
emitWarning: type: boolean (default: false)
Always returns a warning.
failOnError: type: boolean (default: false)
If an error occurs, it will cause the webpack build to fail.
failOnWarning: type: boolean (default: false)
Causes webpack build to fail if warnings occur.
quiet: type: boolean (default: false)
Only display errors, ignore warnings.
outputReport: type: boolean | object (default: false)
Only display errors, ignore warnings.

The description method is described using outputPath as an example.For outputPath, filepath and formatter can be specified.

module.exports = {
  entry:'...',
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader:'eslint-loader',
        options: {
          outputReport: {
            filePath:'checkstyle.xml',
            formatter:'checkstyle',
          },
        },
      },
    ],
  },
};

#webpack