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


91

我有一个通过在线课程创建的简单的helloworld react应用,但是出现此错误:

无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-配置具有未知属性“ postcss”。这些属性是有效的:对象{amd,bail,cache,context,dependencies,devServer,devtool,入口,外部,装载程序,模块,名称,节点,输出,性能。 ,插件,配置文件,recordsInputPath,records utputPath,recordsPath,resolve,resolveLoader,stats,target,watch,watchOptions?}对于错别字:请更正它们。
对于加载程序选项:webpack 2不再允许配置中的自定义属性。应该更新加载程序,以允许通过module.rules中的加载程序选项传递选项。在更新加载程序之前,可以使用LoaderOptionsPlugin将这些选项传递给加载程序:插件:[new webpack.LoaderOptionsPlugin({//测试:/.xxx$/,//可能仅将此功能应用于某些模块选项:{postcss: ...}})]-configuration.resolve具有未知属性'root'。这些属性是有效的:object {alias?,aliasFields?,cachePredicate?,descriptionFiles?,forceExtension?,forcedModuleExtension?,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'
            }
        }
    }

};

Answers:


25

我不完全知道是什么原因造成的,但是我以这种方式解决了。
重新安装整个项目,但请记住必须全局安装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"
  }
}

只需删除webpack-dev-server的本地安装并在全局进行安装,就可以解决此问题。
山姆

47
我认为该loaders选项已替换为rulessee webpack.js.org/concepts/loaders
Olotin Temitope,

@OlotinTemitope是的,谢谢!这解决了我的问题!
西蒙(Simon)

39

只需从“ webpack.config.js”中的“加载程序”更改为“规则”

因为在Webpack 1中使用了加载程序,在Webpack2中使用了规则。您可以看到存在差异


32

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

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

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

2
为什么不工作了?在旧版的webpack中,我总是在extensions数组值的第一个索引处看到空字符串
guilima

25

请尝试以下步骤:

npm uninstall webpack --save-dev

其次是

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

然后,您应该可以再次吞下。为我解决了此问题。


16

对于最近才开始的像我这样的人:loaders关键字被替换rules;。即使它仍然代表装载机的概念。因此webpack.config.js,对于React应用,my如下所示:

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;



9

它正在使用rules而不是loaders

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

8

多年来,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只需在“ webpack.config.js”中将“加载程序”更改为“规则” “这个。因此,我决定提供对此问题的答案。

卸载并重新安装webpack或使用webpack的全局版本不能解决此问题。 重要的是要使用正确版本的webpack来配置文件。

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

每当您获得希望能够解决问题的Webpack配置时,请问自己:该配置用于什么版本的Webpack。

有很多很好的资源可用于学习Webpack。一些是:

  • 官方的WebPack网站描述的WebPack配置,目前在4.x版。尽管这是用于查找webpack应如何工作的好资源,但并非总是最擅长学习webpack中的2个或3个选项如何共同解决问题的方法。但这是最好的起点,因为它会迫使您知道所使用的Webpack版本。:-)
  • 示例中的Webpack(v3?) -采用一口大小的方法来学习webpack,找出问题,然后说明如何在webpack中解决它。我喜欢这种方法。不幸的是,它不是在教webpack 4,但仍然不错。

  • 重新开始设置Webpack4,Babel和React-这是特定于React的,但是如果您想学习创建React单页应用程序所需的许多知识,则很好。

  • Webpack(v3)-令人困惑的部分-很好,涉及很多领域。它的日期为2016年4月10日,不涵盖webpack4,但是许多教学要点是有效的或对学习有用的。

通过示例可以学习到更多有用的资源,如果您认识其他人,请添加注释。希望将来的webpack文章将说明正在使用/解释的版本。


7

我遇到了同样的问题,并通过安装最新的npm版本解决了该问题:

npm install -g npm@latest

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

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

现在解析扩展应该看起来像:

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

然后运行npm start


这对我有用。在我的webpack.config.js文件中,我有一个诸如extensions:[,'.js','.jsx']之类的条目。我删除了空项目“”,它正常工作。configuration.resolve.extensions [0]指的是以下第一项:webpack.config.js文件中的{extensions:['','.js','.jsx']}。
Ajitesh

5

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

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

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

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


将项目升级到较新版本的Angular时遇到了这个问题。只需重新安装Webpack即可!谢谢!
伊万·佩雷斯

3

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

我开始使用yarn来解决我的问题:

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

我发现以下链接很有用: 使用webpack和Babel设置React环境


我试过了,除了有一些警告外,一切正常,但是当我最后一次推荐“纱线启动”时,它给我一个错误“找不到命令启动”,你知道如何解决这个问题吗?谢谢!
Tony Chen

2

我改变了装载机规则webpack.config.js的文件和更新包html-webpack-pluginwebpackwebpack-cliwebpack-dev-server到随后的最新版本,它的工作对我来说!


2

我遇到了同样的问题,我通过在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/ }
        ]
    }
}

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


babel-loader,不是bable-loader
AntonAL


1

在我的情况下,问题是包含项目的文件夹的名称,其名称为“!”。我所做的就是重命名文件夹,一切就绪。


1

我遇到了同样的问题,就我而言,我所要做的就是做好

阅读错误消息...

我的错误消息说:

无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-configuration.entry应该是以下之一:对象{:非空字符串| [非空字符串]} | 非空字符串| [非空字符串]->编译的入口点。详细信息:* configuration.entry应该是function的一个实例-> Function返回入口对象,入口字符串,入口数组或对这些东西的承诺。* 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**
    ],

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

一切顺利。:)



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.