Question

我有一个简单的helloworld反应应用程序是通过在线课程创建的，但是我收到了这个错误：

无效的配置对象。 Webpack已使用a初始化   与API架构不匹配的配置对象。     - 配置具有未知属性'postcss'。这些属性是有效的：object {amd？，bail？，cache？，context？，dependencies？，   devServer？，devtool ?, entry，externals？，loader？，module？，name？，   node？，output？，performance？，plugins？，profile？，recordsInputPath ?,   recordsO utputPath？，recordsPath？，resolve？，resolveLoader？，stats？，   目标？，观看？，观看选项？错别字：请纠正它们。
  对于加载程序选项：webpack 2不再允许自定义属性   组态。        应该更新加载程序以允许通过module.rules中的加载程序选项传递选项。        在加载器更新之前，可以使用LoaderOptionsPlugin将这些选项传递给加载器：        插件：[          new webpack.LoaderOptionsPlugin（{            // test：/.xxx$ /，//可能仅适用于某些模块            选项：{              postcss：...            }          }）        ]     - configuration.resolve有一个未知属性'root'。这些属性是有效的：object {alias？，aliasFields？，   cachePredicate？，descriptionFiles？，enforceExtension？，   enforceModuleExtension？，extensions？，fileSystem？，mainFields？，   mainFiles？，moduleExtensions？，modules？，plugins？，resolver？，   symlinks？，unsafeCache？，useSyncFileSystemCalls？ }     - configuration.resolve.extensions [0]不应为空。

我的webpack文件是：

// work with all paths in a cross-platform manner
const path = require('path');

// plugins covered below
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// configure source and distribution folder paths
const srcFolder = 'src';
const distFolder = 'dist';

// merge the common configuration with the environment specific configuration
module.exports = {

    // entry point for application
    entry: {
        'app': path.join(__dirname, srcFolder, 'ts', 'app.tsx')
    },

    // allows us to require modules using
    // import { someExport } from './my-module';
    // instead of
    // import { someExport } from './my-module.ts';
    // with the extensions in the list, the extension can be omitted from the 
    // import from path
    resolve: {
        // order matters, resolves left to right
        extensions: ['', '.js', '.ts', '.tsx', '.json'],
        // root is an absolute path to the folder containing our application 
        // modules
        root: path.join(__dirname, srcFolder, 'ts')
    },

    module: {
        loaders: [
            // process all TypeScript files (ts and tsx) through the TypeScript 
            // preprocessor
            { test: /\.tsx?$/,loader: 'ts-loader' },
            // processes JSON files, useful for config files and mock data
            { test: /\.json$/, loader: 'json' },
            // transpiles global SCSS stylesheets
            // loader order is executed right to left
            {
                test: /\.scss$/,
                exclude: [path.join(__dirname, srcFolder, 'ts')],
                loaders: ['style', 'css', 'postcss', 'sass']
            },
            // process Bootstrap SCSS files
            {
                test: /\.scss$/,
                exclude: [path.join(__dirname, srcFolder, 'scss')],
                loaders: ['raw', 'sass']
            }
        ]
    },

    // configuration for the postcss loader which modifies CSS after
    // processing
    // autoprefixer plugin for postcss adds vendor specific prefixing for
    // non-standard or experimental css properties
    postcss: [ require('autoprefixer') ],

    plugins: [
        // provides Promise and fetch API for browsers which do not support
        // them
        new ProvidePlugin({
            'Promise': 'es6-promise',
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        // copies image files directly when they are changed
        new CopyWebpackPlugin([{
            from: path.join(srcFolder, 'images'),
            to: path.join('..', 'images')
        }]),
        // copies the index.html file, and injects a reference to the output JS 
        // file, app.js
        new HtmlWebpackPlugin({
            template: path.join(__dirname, srcFolder, 'index.html'),
            filename:  path.join('..', 'index.html'),
            inject: 'body',
        })
    ],

    // output file settings
    // path points to web server content folder where the web server will serve 
    // the files from file name is the name of the files, where [name] is the 
    // name of each entry point 
    output: {
        path: path.join(__dirname, distFolder, 'js'),
        filename: '[name].js',
        publicPath: '/js'
    },

    // use full source maps
    // this specific setting value is required to set breakpoints in they
    // TypeScript source in the web browser for development other source map
    devtool: 'source-map',

    // use the webpack dev server to serve up the web application
    devServer: {
        // files are served from this folder
        contentBase: 'dist',
        // support HTML5 History API for react router
        historyApiFallback: true,
        // listen to port 5000, change this to another port if another server 
        // is already listening on this port
        port: 5000,
        // proxy requests to the JSON server REST service
        proxy: {
            '/widgets': {
                // server to proxy
                target: 'http://0.0.0.0:3010'
            }
        }
    }

};

Answer 1

我通过从我的resolve数组中删除空字符串来解决此问题。查看webpack's site上的解决方案文档。

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

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

Answer 2

只需更改＃34;装载机＆＃34;到＆＃34;规则＆＃34;在＆＃34; webpack.config.js＆＃34;

因为在Webpack 1中使用了加载器，而在Webpack2中使用了规则。你可以看到有differences。

Answer 3

尝试以下步骤：

npm uninstall webpack --save-dev

接着是

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

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

Answer 4

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

在devServer 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']
                }
            }
        ]
    }

};

的package.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"
  }
}

Answer 5

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

此外，您可以使用TypeSCript + Webpack 2。

的此示例

问候！

Answer 6

对于像我这样最近刚开始的人：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;

Answer 7

将“加载器”更改为“规则”对我有用（webpack v4）

Answer 8

在webpack.config.js中用规则替换加载器：[..]：[..] 它对我有用。

Answer 9

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

npm install -g npm@latest

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

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

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

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

然后运行npm start。

Answer 10

使用rules代替loaders

对我有用

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

}

Answer 11

Webpack的配置文件多年来发生了变化（可能是每个主要版本）。问题的答案：

为什么会出现此错误

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

是因为配置文件与正在使用的网络包的版本不匹配。

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

卸载并重新安装webpack，或使用全局版本的webpack无法解决此问题。 为正在使用的配置文件使用正确版本的webpack是重要的。

如果在使用全球版本时修复了此问题，则可能意味着您的全球版本已经过去了＃34;你使用的webpack.config.js文件格式是＆＃34; old＆＃34;所以匹配，中提琴现在可以正常工作。我只是为了工作，但希望读者知道他们工作的原因。

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

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

Official Webpack website describing the webpack configuration, currently at version 4.x。虽然这是查找webpack如何工作的一个很好的资源，但它并不总是最好的学习webpack中的2或3个选项如何协同工作来解决问题。但它是最好的开始，因为它会迫使您知道您正在使用的Webpack版本。： - ）
Webpack (v3?) by Example - 采用一口大小的方法来学习webpack，选择一个问题，然后展示如何在webpack中解决它。我喜欢这种方法。不幸的是，它不是在教webpack 4，但仍然很好。
Setting up Webpack4, Babel and React from scratch, revisited - 这是针对React的，但如果您想了解创建反应单页应用程序所需的许多内容，那就太好了。
Webpack (v3) — The Confusing Parts - 很好，涵盖了很多方面。它的日期为2016年4月10日，并不涵盖webpack4，但许多教学点对学习有用或有用。

通过示例有更多用于学习webpack4的良好资源，如果您了解其他人，请添加评论。希望未来的webpack文章能说明正在使用/解释的版本。

Answer 12

在将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

Answer 13

当您使用冲突版本（角度js）时，通常会发生此错误。因此，Webpack无法启动应用程序。您只需删除Webpack并重新安装即可对其进行修复。

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

重新启动应用程序，一切正常。

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

Answer 14

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

之前：

@Published

之后：正如我的代码片段所示，我只是将模块对象中的 loaders 替换为 rules 。

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

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

Answer 15

当我使用path.resolve（）来设置'entry'和'output'设置时，会出现此错误。 entry: path.resolve(__dirname + '/app.jsx')。试试entry: __dirname + '/app.jsx'

Answer 16

我的错误与你相同。

npm卸载webpack --save-dev

＆安培;

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

解决它！。

Answer 17

我在webpack.config.js文件中将 loaders 更改为 rules ，并更新了软件包html-webpack-plugin，webpack，{{1} }，webpack-cli到最新版本，那么它对我有用！

Answer 18

我遇到了同样的问题，就我而言，我所要做的就是表现出色。

阅读错误消息...

我的错误消息说：

无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。 -configuration.entry应该是以下之一：功能|对象{：非空字符串| [非空字符串]} |非空字符串| [非空字符串] ->编译的入口点。细节： * 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**
    ],

...所以我刚刚删除了标记的行 ...

一切顺利。：）

Answer 19

在我的情况下，问题出在项目所在的文件夹的名称上，其名称为“！”。我要做的就是重命名文件夹，一切准备就绪。

Answer 20

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

Answer 21

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

Answer 22

有点不太可能的情况。

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

因此，请尽可能检查 yarn.lock 文件中的差异。

Answer 23

如果您来自单一 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"
  },

Answer 24

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

Answer 25

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

配置对象无效。 Webpack已使用与API架构

25 个答案: