配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化

只需将“webpack.config.js”中的“loaders”更改为“rules”即可

因为在 Webpack 1 中使用了 loader，在 Webpack2 中使用了规则。您可以看到有 differences。

---

我通过从我的解析数组中删除空字符串解决了这个问题。查看 webpack's site 上的解决文档。

//Doesn't work
module.exports = {
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
  ...
}; 

//Works!
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
  ...
};

---

我不完全知道是什么原因造成的，但我是这样解决的。重新安装整个项目，但请记住 webpack-dev-server 必须全局安装。我经历了一些服务器错误，比如找不到 webpack，所以我使用链接命令链接了 Webpack。在输出解决一些绝对路径问题。

在开发服务器 object: inline: false

webpack.config.js

module.exports = {
    entry: "./src/js/main.js",
    output: {
        path:__dirname+ '/dist/',
        filename: "bundle.js",
        publicPath: '/'
    },
    devServer: {
        inline: false,
        contentBase: "./dist",
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude:/(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }

};

包.json

{
  "name": "react-flux-architecture-es6",
  "version": "1.0.0",
  "description": "egghead",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cichy/react-flux-architecture-es6.git"
  },
  "keywords": [
    "React",
    "flux"
  ],
  "author": "Jarosław Cichoń",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/cichy/react-flux-architecture-es6/issues"
  },
  "homepage": "https://github.com/cichy/react-flux-architecture-es6#readme",
  "dependencies": {
    "flux": "^3.1.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}

---

尝试以下步骤：

npm uninstall webpack --save-dev

其次是

npm install webpack@2.1.0-beta.22 --save-dev

然后你应该能够再次吞咽。为我解决了这个问题。

---

Webpack 的配置文件多年来一直在变化（可能随着每个主要版本）。问题的答案：

为什么我会收到此错误

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

是因为配置文件与使用的 webpack 版本不匹配。

接受的答案没有说明这一点，其他答案暗示了这一点，但没有明确说明 npm install webpack@2.1.0-beta.22、Just change from "loaders" to "rules" in "webpack.config.js" 和 this。所以我决定提供我对这个问题的答案。

卸载并重新安装 webpack，或者使用 webpack 的全局版本都不会解决这个问题。为正在使用的配置文件使用正确版本的 webpack 很重要。

如果在使用全局版本时此问题已得到解决，则可能意味着您的全局版本是“旧的”并且您使用的 webpack.config.js 文件格式是“旧的”，因此它们匹配并且中提琴现在可以正常工作。我完全赞成工作，但希望读者知道他们为什么工作。

每当你得到一个你希望能解决你的问题的 webpack 配置时……问问自己这个配置是用于什么版本的 webpack。

有很多学习 webpack 的好资源。有些是：

描述 webpack 配置的官方 Webpack 网站，当前版本为 4.x。虽然这是一个很好的了解 webpack 应该如何工作的资源，但它并不总是最好的学习 webpack 中的 2 或 3 个选项如何协同工作来解决问题。但它是最好的起点，因为它迫使你知道你正在使用什么版本的 webpack。 :-)

Webpack (v3?) by Example - 采用一种简单的方法来学习 webpack，挑选一个问题，然后展示如何在 webpack 中解决它。我喜欢这种方法。不幸的是，它没有教授 webpack 4，但仍然很好。

从头开始设置 Webpack4、Babel 和 React - 这是 React 特有的，但如果你想学习创建 React 单页应用程序所需的许多东西，这很好。

Webpack (v3) - 令人困惑的部分 - 很好，涵盖了很多领域。它的日期为 2016 年 4 月 10 日，不包括 webpack4，但许多教学点是有效或有用的。

学习 webpack4 的例子还有很多好的资源，如果你知道其他的请添加评论。希望未来的 webpack 文章将说明正在使用/解释的版本。

---

我猜你的 webpack 版本是 2.2.1。我认为您应该使用此迁移指南 --> https://webpack.js.org/guides/migrating/

此外，您可以使用 TypeSCript + Webpack 2 的这个示例。

---

对于像我这样最近开始的人：loaders 关键字是 replaced 和 rules；即使它仍然代表装载机的概念。因此，对于 React 应用程序，我的 webpack.config.js 如下所示：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    rules : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

---

当您有冲突的版本（角度 js）时，通常会发生此错误。所以 webpack 无法启动应用程序。您可以通过删除 webpack 并重新安装来简单地修复它。

npm uninstall webpack --save-dev
npm install webpack --save-dev

重新启动您的应用程序，一切都很好。

我希望能够帮助某人。干杯

---

它使用 rules 而不是 loaders

module : {
  rules : [
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel-loader'
    }
  ]
}

---

在 webpack.config.js 中替换 loaders: [..] 为 rules: [..] 它对我有用。

---

我有同样的问题，我通过安装最新的 npm 版本解决了它：

npm install -g npm@latest

然后改webpack.config.js文件解决

configuration.resolve.extensions[0] 不应为空。

现在解析扩展应该如下所示：

resolve: {
    extensions: [ '.js', '.jsx']
},

然后运行 npm start。

---

使用 npm i -S webpack@latest 安装 "webpack": "^5.41.1" 将解决此问题。

---

将 webpack 引入使用 npm init 创建的项目时，我收到了相同的错误消息。

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist/assets" is not an absolute path!

我重新开始使用纱线，它为我解决了这个问题：

brew update
brew install yarn
brew upgrade yarn
yarn init
yarn add webpack webpack-dev-server path
touch webpack.config.js
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
yarn add html-webpack-plugin
yarn start

我发现以下链接很有帮助：Setup a React Environment Using webpack and Babel

---

我将 webpack.config.js 文件中的 loaders 更改为 rules 并将软件包 html-webpack-plugin、webpack、webpack-cli、webpack-dev-server 更新为最新版本，然后它为我工作！

---

我有同样的问题，我通过在我的 web.config.js 文件中进行一些更改来解决这个问题。仅供参考，我使用的是最新版本的 webpack 和 webpack-cli。这个技巧挽救了我的一天。我在版本前后附上了我的 web.config.js 文件的示例。

前：

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: './index.js',
    output: {
         filename: 'bundle.js'
    },
    module: {
        loaders : [
           { test: /\.js?/, loader: 'bable-loader', exclude: /node_modules/ }
        ]
    }
}

之后：我刚刚将加载器替换为模块对象中的规则，如您在我的代码片段中所见。

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules : [
            { test: /\.js?/, loader: 'bable-loader', exclude: /node_modules/ }
        ]
    }
}

希望这将帮助某人摆脱这个问题。

---

对我来说，我必须改变：

cheap-module-eval-source-map

至：

eval-cheap-module-source-map

v4 到 v5 的细微差别。

---

我和你有同样的错误。

npm 卸载 webpack --save-dev

&

npm install webpack@2.1.0-beta.22 --save-dev

解决这个问题！。

---

当我使用 path.resolve() 来设置“入口”和“输出”设置时，会出现此错误。 entry: path.resolve(__dirname + '/app.jsx')。试试entry: __dirname + '/app.jsx'

---

在我的情况下，问题是包含项目的文件夹的名称，它带有符号“！”我所做的只是重命名文件夹，一切都准备好了。

---

我有同样的问题，就我而言，我所要做的就是做好事

阅读错误信息...

我的错误信息说：

配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.entry 应该是以下之一：function |对象 { : 非空字符串 | [非空字符串] } |非空字符串 | [非空字符串] -> 编译的入口点。详细信息： * configuration.entry 应该是函数的实例 -> 一个返回入口对象、入口字符串、入口数组或对这些东西的承诺的函数。 * configuration.entry['styles'] 应该是一个字符串。 -> 字符串被解析为启动时加载的模块。 * configuration.entry['styles'] 不应包含项目 'C:\MojiFajlovi\Faks\11Master\1Semestar\UDD-UpravljanjeDigitalnimDokumentima\Projekat\nc-front\node_modules\bootstrap\dist\css\bootstrap.min.css'两次。

正如粗体错误消息行所说，我刚刚打开 angular.json 文件并发现 styles 看起来像这样：

"styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css" <-- **marked line**
    ],

...所以我只是删除了标记线...

一切顺利。 :)

---

使用不同的语法（标志...），可能会在 webpack（3、4、5...）中从版本到另一个版本导致此问题，您必须阅读新的 webpack 配置更新和不推荐使用的功能。

---

在 webpacker.yml 中检查您的 source_path。我在从另一个项目复制 webpacker.yml 的项目中遇到了同样的错误。它应该指向包含您的包目录的目录。

---

在我的情况下，这是由于从另一个项目复制 webpack.js 而没有更改“入口”和“输出”路径以匹配新项目结构。一旦我修复了路径，一切都会再次运行。

---

我有 webpack 版本 3，所以我根据当前的 https://www.npmjs.com/package/webpack-dev-server“版本”页面安装了 webpack-dev-server 版本 2.11.5。然后问题就消失了。

https://i.stack.imgur.com/qWJKg.png

---

有点不太可能的情况。

我已删除 yarn.lock 文件，该文件引用了旧版本的 webpack。

因此，请检查以查看您的 yarn.lock 文件中的差异。

---

如果您来自单一的 SPA 世界，并且遇到此错误。我意识到问题是由为应用程序提供服务的脚本引起的。

一个例子是这样的：

"scripts": {
    "start": "ng serve",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

要使其工作，请将启动脚本更改为以下脚本：

"scripts": {
    "start": "npm run serve:single-spa:play",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

---

试试这个，问题是，规则必须是一个列表或数组......

module:{
    rules:[
        {
            test:/\.js$/,
            exclude: /node_modules/,
            use:{
                loader:'babel-loader'
            },
        }
    ]
}

---

如果您在将 Angular 版本从 11 迁移到 12 并使用单个 spa 后遇到此错误，

然后您可以为以下软件包配置“package.json”

"single-spa": "^5.9.3"

"single-spa-angular": "^5.0.2"

“@angular-builders/custom-webpack": "^12.1.3"

"webpack": "^5.70.0"

npm install之后

---

我在尝试将 WebPack5 与 Cypress 和 Cucumber 一起使用时遇到了这个问题（基于此示例 https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example）。将 plugin\index.js 更改为此对我有用！

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
};

---

只需要安装 npm 使用这个命令：

npm install webpack

如果 webpack 没有全局安装，那么使用这个命令来安装它：

npm install webpack -g

---