我最近添加了 eslint
和 eslint-loader
NPM 模块作为我的 React 应用程序(使用 Webpack)的开发依赖项 - 当我在本地运行我的开发服务器时,一切都很好。但是,当我尝试在本地构建生产版本时,它失败并出现以下错误:
npm ERR! Darwin 16.7.0
npm ERR! argv "/Users/user/.nvm/versions/node/v6.11.1/bin/node" "/Users/user/.nvm/versions/node/v6.11.1/bin/npm" "run" "build:client"
npm ERR! node v6.11.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! App@0.0.1 build:client: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the App@0.0.1 build:client script 'webpack'.
一时兴起,我还尝试推送到 Heroku,在那里我得到了一个更有用的错误:
ERROR in Entry module not found: Error: Can't resolve 'eslint-loader' in '/tmp/build_5f502b6d28fee058cbe484b873b6e7cb'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! App@0.0.1 build:client: `webpack`
npm ERR! Exit status 2
因此,在这一部分,我承认我对 Webpack 有点困惑,如果可以提供一些指导和说明,我将非常感激。我见过其他人也有类似的问题,但从未提及 '/tmp/build...'
目录。
首先,这是我的 package.json
中的脚本和其他一些相关部分:
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.bundle.js",
"start:dev": "concurrently --prefix \"[{name}]\" -k \"webpack -d --watch --colors\" \"nodemon index.js\" -n \"WEBPACK,NODEMON\" --content-base public/",
"build:client": "webpack",
"build:server": "webpack --config webpack.server.config.js",
"build": "NODE_ENV=production npm run build:client && npm run build:server",
"postinstall": "npm run build"
},
"dependencies": {
"webpack": "^2.6.0"
},
"devDependencies": {
"eslint": "^4.4.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-react": "^7.1.0"
"webpack-dev-server": "^2.4.5"
}
正如错误所述,build:client
是失败的地方......
来自webpack.config.js
:
"module": {
"loaders": [
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx?$/
},
{
"exclude": /node_modules/,
"loader": "babel-loader",
"test": /\.js$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"test": /\.js$/
}
]
}
如果我在配置中注释掉引用 eslint-loader
的部分,那么它构建得很好,所以正如 Heroku 如此敏锐地观察到的那样,问题一定出在这些行上。谁能建议解决这个问题?我不确定我是否真正理解出了什么问题,更不用说如何解决它了。
编辑这是我完整的webpack.config.js
:
const webpack = require("webpack")
module.exports = {
"entry": "./src/index.jsx",
"module": {
"loaders": [
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx?$/
},
{
"exclude": /node_modules/,
"loader": "babel-loader",
"test": /\.js$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"test": /\.js$/
}
]
},
"output": {
"filename": "./public/bundle.js",
"publicPath": "/"
},
"plugins": [
new webpack.DefinePlugin({
"API_URL": JSON.stringify(process.env.API_URL || "http://localhost:4000/api/v1"),
"IS_STAGING": JSON.stringify(process.env.IS_STAGING || "false"),
"NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")
})
]
}
最佳答案
感谢@Marek 和@archae0pteryx 对此的想法 - 我想出了一个修复方案,尽管它可能不是最佳的......
基本上,我创建了一个 webpack.dev.config.js
文件,其中包含对 eslint-loader
的引用...这很好,因为我只想在本地开发中使用 linting。然后,我从更新的 package.json
主配置文件中删除了这些引用,以在本地开发中使用开发配置,一切都很好。
关于node.js - Webpack 错误 - 无法解析 'tmp/build...' 中的加载程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45789115/