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

Posted 2023-04-13

【中文标题】配置对象无效。 Webpack 已使用与 ReactJS 中的 API 模式不匹配的配置对象进行初始化

【英文标题】：Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema in ReactJS

【发布时间】：2020-01-23 02:56:17

【问题描述】：

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

下面是我运行 yarn run build:prod（生产模式）时出现的终端错误

下面是 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"
  

【参考方案1】：

在您的 Webpack 配置中将“插件”更改为“插件”

【讨论】：

我遇到了另一个错误 (node:4232) DeprecationWarning: Tapable.plugin 已被弃用。改为在 .hooks 上使用新 API