Webpack4配置eslint-loader，打包報(bào)錯(cuò)，編譯失??！報(bào)錯(cuò)信息：ERROR in ./src/index.js?

報(bào)錯(cuò)信息

ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (D:\webpack\node_modules\eslint-loader\index.js:148:18)

期望得到的結(jié)果

./src/index.js
    Line 3:  'num2' is assigned a value but never used  no-unused-vars
    Line 4:  'num3' is defined but never used           no-unused-vars

初識Webpack 4，嘗試配置eslint-loader加載器，測試eslint是否可以檢查代碼，并打印出提示信息
- 沒有配置babel-loader加載器?
  - 應(yīng)該和babel-loader加載器沒有關(guān)系。即便在webpack.config.js中配置了babel-loader加載器，報(bào)同樣的錯(cuò)誤、編譯失敗
- 沒有.eslintrc配置文件?
  - 錯(cuò)誤位置在'./node_modules/eslint-loader/index.js'，我以為在沒有讀取.eslintrc配置文件之前，就可能報(bào)錯(cuò)了
- webpack.config.js配置文件沒有配置正確?
  - 按照官方文檔進(jìn)行相應(yīng)的配置
- 是eslint-loader/index.js的出錯(cuò)?
  - 應(yīng)該不是
- 那么應(yīng)該如何配置webpack，可以解決webpack的錯(cuò)誤呢?

文件目錄結(jié)構(gòu)

webpack // 根目錄
├── node-modules // 依賴模塊包
├─┬ src // 源文件放置的目錄
│ ├── index.html // 首頁
│ └── index.js // 入口文件
├── package.json // 配置項(xiàng)
├── webpack.config.js // webpack配置文件

配置文件如下

package.json

{
  "name": "webpack4.x",
  "version": "1.0.0",
  "description": "webpack4.x",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --inline --open --hot --port 3000 --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^4.19.0",
    "eslint-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js

'use strict';
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', 
  entry: './src/index.js',
  output: {            
    path: path.resolve(__dirname, 'dist'),  
    filename: 'main.js' 
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('eslint-loader')
          }
        ]
      }
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.join(__dirname, './src/index.html'), 
      filename: 'index.html'
    })
  ]
}

src目錄下的源文件如下

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack 4</title>
</head>
<body>
  <h1>Webpack 4</h1>
</body>
</html>

src/index.js

// 測試eslint
var num1 = 1;
var num2 = 2;
var num3;

console.log(num1);

在webpack-dev-server開啟的服務(wù)器環(huán)境中，報(bào)同樣的錯(cuò)誤、編譯失敗

期望在瀏覽器的console中顯示警告信息
如果有Webpack 4+eslint-loader正確的配置，并且在終端或控制臺(tái)上沒有錯(cuò)誤信息，可以將相關(guān)的代碼分享出來么？