Webpack unknown error : Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

Question

我尝试通过示例学习使用 MERN 堆栈的简单项目。但是我不知道为什么 webpack 不工作并在终端中抛出这样的错误。

我正在使用 Ubuntu v16.04。

npm run dev

mern-stack@1.0.0 dev /home/trungh13/Dev/mern-stack

webpack -wd Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! mern-stack@1.0.0 dev: webpack -wd npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the mern-stack@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是我的 package.json 文件：

  {
    "name": "mern-stack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "nodemon --exec babel-node ./server/server.js --ignore public/",
      "dev": "webpack -wd"
    },
    "author": "trungh13",
    "license": "ISC",
    "dependencies": {
      "ejs": "^2.5.7",
      "express": "^4.16.3",
      "mongodb": "^3.0.5",
      "react": "^16.2.0",
      "react-dom": "^16.2.0"
    },
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-eslint": "^8.2.2",
      "babel-loader": "^7.1.4",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "eslint": "^4.19.1",
      "eslint-plugin-react": "^7.7.0",
      "nodemon": "^1.17.2",
      "webpack": "^4.2.0"

    }
  }

这是我的 webpack.config.js:

module.exports={
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:'babel-loader'
            }
        ]    
    }
};

非常感谢。

Answer 1

问题出在 module 对象内部。 loaders 属性无效，您应该改用 rules 属性。此外，在 webpack-4 中，您需要提供 mode 属性（可能的值为 development、production 和 none）。

另外要提的是你需要在你的 devDependencies 中包含 webpack-cli 包，因为在最新版本的 webpack 中，CLI 工具被移动到这个包中： webpack-cli

使用 Webpack 4 配置对象检查此 webpack-demo 项目（针对 development 和 production 环境）。我认为之前的教程项目可能会有所帮助。

Webpack unknown error : Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

Webpack unknown error : Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

reactjs

npm

webpack

terminal

webpack-4