Question

要使用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;

Package.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>
        );
    }
}

这里缺少一些基本的建议吗？

Answer 1

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

您已经定义

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

但是你可能是故意的

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

将devServer移至外部模块应解决此问题并重定向您的404。

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

1 个答案: