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

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

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

无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-配置具有未知属性“postcss”。这些属性是有效的：对象{amd，bail，cache，context，dependencies，devServer，devtool，入口，外部，加载程序，模块，名称，节点，输出，性能。，插件，配置文件，recordsInputPath，recordsutputPath，recordsPath，resolve，resolveLoader，stats，target，watch，watchOptions？}对于错别字：请更正它们。 对于加载程序选项：webpack2不再允许配置中的自定义属性。应该更新加载程序，以允许通过module.rules中的加载程序选项传递选项。在更新加载程序之前，可以使用LoaderOptionsPlugin将这些选项传递给加载程序：插件：[newwebpack.LoaderOptionsPlugin（{//测试：/.xxx$/，//可能仅将此功能应用于某些模块选项：{postcss：…}}）]-configuration.resolve具有未知属性’root’。这些属性是有效的：object{alias？，aliasFields？，cachePredicate？，descriptionFiles？，forceExtension？，forceforceModuleExtension？，extensions，fileSystem？，mainFields，mainFiles？，moduleExtensions？，modules？，plugins？，resolver?、符号链接？，unsafeCache ?,useSyncFileSystemCalls？}-configuration.resolve.extensions [0]不能为空。

我的webpack文件是：

// work with all paths in a cross-platform mannerconst path = require(’path’);// plugins covered belowconst { ProvidePlugin } = require(’webpack’);const CopyWebpackPlugin = require(’copy-webpack-plugin’);const HtmlWebpackPlugin = require(’html-webpack-plugin’);// configure source and distribution folder pathsconst srcFolder = ’src’;const distFolder = ’dist’;// merge the common configuration with the environment specific configurationmodule.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 rightextensions: [’’,’.js’,’.ts’,’.tsx’,’.json’],// root is an absolute path to the folder containing our application // modulesroot: path.join(__dirname,’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,’ts’)],loaders: [’style’,’css’,’postcss’,’sass’] },// process Bootstrap SCSS files {test: /.scss$/,’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// themnew ProvidePlugin({ ’Promise’: ’es6-promise’,’fetch’: ’imports?this=>global!exports?global.fetch!whatwg-fetch’}),// copies image files directly when they are changednew 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.jsnew HtmlWebpackPlugin({ template: path.join(__dirname,’index.html’),filename: path.join(’..’,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 foldercontentBase: ’dist’,// support HTML5 History API for react routerhistoryApiFallback: true,// listen to port 5000,change this to another port if another server // is already listening on this portport: 5000,// proxy requests to the JSON server REST serviceproxy: { ’/widgets’: {// server to proxytarget: ’http://0.0.0.0:3010’ }} }};