[JavaScript]WebpackにESLintを設定する

ESLintを設定してある前提です。Webpackでbundleする際に、ESLintを実行する方法です。
ESLint自体の設定は下記記事を参考にしてください。Nuxt.jsでの設置ですが、変わらず動作します。
[NUXT.JS]ESLint and Prettierの設定の方法

eslint-loaderのインストール

npmからeslint-loaderをインストールします。

npm install eslint-loader --save-dev

eslint-loaderをconfigに設定する

基本的には下記の通りになります。

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

ただ、webpackの場合、ESLintのみloaderとして設定することは少ないと思います。
その場合はuseを使用します。

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

上記はbabelと併用した場合です。
併用した場合、記載する順序が重要になります。上記のように記載した場合は、eslintからloaderが読み込まれます。
とはいえ、より厳密にbabel-loaderよりも先にeslint-loaderを実行したい場合は、下記の通りになります。

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

enforce: 'pre'をつけることで確実に先に実行することができます。

オプションについて

オプションについての簡単なまとめです。詳細はeslint-loaderのページをご確認ください。
webpack eslint-loader

cache
type:boolean (default: false)
キャッシュを利用することで、lintingに要する時間を短縮できます。
eslintPath
type:String (default: eslint)
eslintのディレクトリパスを指定します。
fix
type:boolean (default: false)
フォーマッターを使用して、自動的にコーディングルールにあわない記述を修正します。
formatter
type:String | function (default: stylish)
使用するformatterを設定します。
emitError
type:boolean (default: false)
常にエラーを返します。
emitWarning
type:boolean (default: false)
常に警告を返します。
failOnError
type:boolean (default: false)
エラーが発生した場合、webpackのビルドを失敗させます。
failOnWarning
type:boolean (default: false)
警告が発生した場合、webpackのビルドを失敗させます。
quiet
type:boolean (default: false)
エラーのみ表示し、警告は無視します。
outputReport
type:boolean | object (default: false)
エラーのみ表示し、警告は無視します。

outputPathを例に記述方法を記載します。outputPathはさらにfilepathとformatterが指定できます。

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