Question

我正在尝试设置反应应用。

的package.json：

.csv

webpack配置：

{
  "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' ]
     }
   ]
  }
};

错误：

/Users/prakashchandrabarnwal/Desktop/react-redux/node_modules/webpack/lib/webpack.js:24 抛出新的WebpackOptionsValidationError（webpackOptionsValidationErrors）;

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}`);
  }
});

WebpackOptionsValidationError：

无效的配置对象。 Webpack已使用a初始化配置对象与API架构不匹配。

Answer 1

错误消息中的下一行通常应该告诉您配置中的错误位置属性noInfo和debug是错误的。只需删除它们。

Answer 2

Webpack已使用与API架构不匹配的配置对象初始化。

您没有使用webpack 4的配置。您可以自己看到您对webpack 1.x有意见。首先删除插件，然后将配置与official schema进行比较。

具有热模块实现的React App的Webpack配置

2 个答案: