(adsbygoogle = window.adsbygoogle || []).push({}); 如何解決無效的配置對象已使用與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’ }} }};