Webpack4配置eslint-loader,打包报错,编译失败!报错信息:ERROR in ./src/index.js⋯

1608
  • 9
  • 报错信息

    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)

    期望得到的结果

    ./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加载器?

      • 应该和babel-loader加载器没有关系。即便在webpack.config.js中配置了babel-loader加载器,报同样的错误、编译失败
    • 没有.eslintrc配置文件?

      • 错误位置在'./node_modules/eslint-loader/index.js',我以为 在没有读取.eslintrc配置文件之前,就可能报错了
    • webpack.config.js配置文件没有配置正确?

      • 按照官方文档进行相应的配置
    • eslint-loader/index.js的出错?

      • 应该不是
    • 那么应该如何配置webpack,可以解决webpack的错误呢?
  • 文件目录结构

    webpack // 根目录
    ├── node-modules // 依赖模块包
    ├─┬ src // 源文件放置的目录
    │ ├── index.html // 首页
    │ └── index.js // 入口文件
    ├── package.json // 配置项
    ├── 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开启的服务器环境中,报同样的错误、编译失败

    error

    期望在浏览器的console中显示警告信息

    eslint-loader

  • 如果有Webpack 4+eslint-loader正确的配置,并且在终端或控制台上没有错误信息,可以将相关的代码分享出来么?
回复
阅读 12.3k
4 个回答
✓ 已被采纳

全局安装eslint试试看

斑马
  • 1
新手上路,请多包涵

服务器端下个roadhog@2.5.0-beta.1试试

在webpack的plugins中添加这一个配置项

new webpack.LoaderOptionsPlugin(
    {
      minimize: true,
      debug: false,
      options: {
        context: __dirname
      }
    }
 )
一叶一菩提
  • 1
新手上路,请多包涵

你好 请问这个问题解决了吗?我也遇到了同样的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏