[英]Webpack error - can't resolve loader in 'tmp/build…'
我最近將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
刪除了這些引用,以在本地開發中使用dev config,這一切都很好。
我遇到了同樣的問題,但是對我來說,這並沒有解決。
我用EvHaus的這個答案解決了它https://github.com/babel/babel-loader/issues/166#issuecomment-184763126
這是解決方案:
plugins: [
require.resolve("babel-plugin-add-module-exports"),
require.resolve("babel-plugin-transform-decorators-legacy")
],
presets: [
require.resolve("babel-preset-es2015"),
require.resolve("babel-preset-stage-0"),
require.resolve("babel-preset-react")
]
我認為您的問題可能是您在devDependencies中devDependencies
。 如果我沒記錯的話,Heroku只會安裝您應用程序的dependencies
項。 嘗試將EsLint移入dependencies
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.