最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Webpack错误

运维笔记admin11浏览0评论

Webpack错误

Webpack错误

我最近将eslinteslint-loader NPM模块作为dev依赖项添加到我的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! [email protected] build:client: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] 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! [email protected] 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配置,这一切都很好。

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论