Webpack4配置eslint-loader，打包报错，编译失败！报错信息：ERROR in ./src/index.js⋯
报错信息
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开启的服务器环境中，报同样的错误、编译失败期望在浏览器的
console中显示警告信息 - 如果有
Webpack 4+eslint-loader正确的配置，并且在终端或控制台上没有错误信息，可以将相关的代码分享出来么？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
你好 请问这个问题解决了吗？我也遇到了同样的问题
在webpack的plugins中添加这一个配置项
全局安装eslint试试看
服务器端下个roadhog@2.5.0-beta.1试试