无效的配置对象。 Webpack 已使用与 ReactJS 中的 API 模式不匹配的配置对象初始化

Question

由于配置对象与 API 架构不匹配，无法构建生产模式。将 webpack@3.0.0 升级到 webpack@4.40.2 版本后出现该错误。我更新了 webpack 版本，因为 extract-text-webpack-plugin 与 webpack@3.0.0 不兼容。

下面是i 运行 yarn 运行 build:prod (production mode)

时的终端错误

下面是 webpack.config.js 文件

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env)=>{
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');

  console.log('env', env);
  return {
    entry: './src/app.js',
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },{
        test: /\.s?css$/,
        use: CSSExtract.extract({
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      }]
    },
    plugin: [
      CSSExtract
    ],
    devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true
    }
  
  
  }
};

下面是 package.json 文件

{
  "name": "expensify-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "test": "jest"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "enzyme": "3.0.0",
    "enzyme-adapter-react-16": "1.0.0",
    "jest": "20.0.4",
    "live-server": "^1.2.0",
    "moment": "^2.24.0",
    "node-sass": "4.5.3",
    "normalize.css": "7.0.0",
    "npm": "^6.11.3",
    "raf": "3.3.2",
    "react": "16.0.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dates": "^21.1.0",
    "react-dom": "16.0.0",
    "react-modal": "2.2.2",
    "react-redux": "5.0.5",
    "react-router-dom": "^5.0.1",
    "react-test-renderer": "16.0.0",
    "redux": "^4.0.4",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "uuid": "^3.3.3",
    "validator": "8.0.0",
    "webpack": "^4.40.2",
    "webpack-dev-server": "2.5.1"
  },
  "devDependencies": {
    "extract-text-webpack-plugin": "^3.0.2",
    "webpack-cli": "^3.3.9"
  }
}

Answer 1

在您的 Webpack 配置中将 'plugin' 更改为 'plugins'

无效的配置对象。 Webpack 已使用与 ReactJS 中的 API 模式不匹配的配置对象初始化

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema in ReactJS

reactjs

webpack

webpack-dev-server

webpack.config.js

webpack-4