无效的配置对象。 Webpack 已使用不匹配的配置对象初始化答案

【问题标题】：Invalid configuration object. Webpack has been initialized using a configuration object that does not match无效的配置对象。 Webpack 已使用不匹配的配置对象初始化
【发布时间】：2018-12-19 16:00:38
【问题描述】：

为了使用 react router v4，我在 webpack 和 package.json 文件中添加了一些配置。执行npm start时出现错误。

错误

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'devServer'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

Webpack 文件(webpack.config.js)

var path = require("path"),
    DIST_DIR = path.resolve(__dirname, "dist"),
    SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                include: SRC_DIR,
                query:
                    {
                        presets: ["react", "es2015", "stage-2"]
                    }
            }
        ],
        devServer: {
            historyApiFallback: true,
        }
    }

};

module.exports = config;

包.json

{
  "name": "reactcorepoc",
  "version": "1.0.0",
  "description": "react with .net core",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
    "build:prod": "webpack -p && cp src/index.html dist/index.html "
  },
  "author": "Ankur",
  "license": "MIT",
  "dependencies": {
    "aws-amplify": "^0.4.8",
    "aws-amplify-react": "^0.1.54",
    "axios": "^0.18.0",
    "material-ui": "^0.20.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

App.js

class APP extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route path="/" component={loginComponent} />
                    <Route path="/GetAllAccounts" component={AccountComponent} />
                </div>
            </BrowserRouter>
        );
    }
}

这里缺少一些基本的东西，建议？

【问题讨论】：

删除 devServer: { historyApiFallback: true } 看看会发生什么。
@Tholle 当我在 webpack.config.js 中删除 devServer: { historyApiFallback: true } 它不会在命令行上给出错误。但是，当我在浏览器上localhost:8081 时，它会显示一个空白页面，并显示错误消息此站点无法访问 localhost 拒绝连接。
我很难理解您的 build 脚本到底做了什么。尝试添加一个新的，例如test，试试这个："test": "webpack-dev-server"
构建：脚本使用 unix 的复制命令将我的 index.html 从 src 文件夹复制到 dist index.html 。您也知道 webpack-dev-server 的扩孔部分用于热重载和历史API回调
可以，但您不必同时使用webpack 和webpack-dev-server。

标签： reactjs webpack react-router

【解决方案1】：

您似乎将 devServer 对象放在了错误的位置。

你已经定义了

var config = {
    ...
    module: {
        ...
        devServer: {
            historyApiFallback: true,
        }
    }
}

但你可能是说

var config = {
    ...
    devServer: {
        historyApiFallback: true,
    }
}

将 devServer 移到模块外应该可以解决问题并重定向您的 404。

【讨论】：