Webpack 带有热模块重新编码的React应用程序的网页包配置

我正在尝试设置react应用程序

package.json：

{
  "name": "react-redux",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "scripts":{
    "start":"babel-node tools/srcServer.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "open": "^0.0.5",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-dev-middleware": "^3.1.2",
    "webpack-hot-middleware": "^2.22.1"
  }
}

网页包配置：

import webpack from 'webpack';
import path from 'path';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  plugins: [
      // OccurrenceOrderPlugin is needed for webpack 1.x only
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      // Use NoErrorsPlugin for webpack 1.x
      new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
    rules: [
      {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
     {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
     }
   ]
  }
};

服务器：

import express from 'express';
import webpack from 'webpack';
import path from 'path';
import config from '../webpack.config.dev';
import open from 'open';

/* eslint-disable no-console */

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join( __dirname, '../src/index.html'));
});

app.listen(port, function(err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

错误：

/Users/prakashchandrabarnwal/Desktop/react redux/node_modules/webpack/lib/webpack.js:24 抛出新的WebPackageOptions ValidationError（WebPackageOptions ValidationErrors）

WebPackageOptions验证错误：

无效的配置对象。已使用 配置对象与API架构不匹配

---

错误消息中的下一行通常会告诉您配置中的错误在哪里。
属性

noInfo

和

debug

错误。把它们取下来

已使用与API架构不匹配的配置对象初始化网页包

您没有使用webpack 4的配置。你可以看到自己对Webpack1.x有评论。首先删除插件，然后将您的配置与

            ^