node.js - 配置对象无效。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化

Question

在运行yarn run build时，我遇到了以下错误:

    [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
     - configuration.optimization has an unknown property 'moduleIDs'. These properties are valid:
       object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
       -> Enables/Disables integrated optimizations.

我不确定这是否是由于我的 webpack 模块中的弃用造成的，或者我可能还需要查看其他地方。

这是我的webpack.config.js:

    const webpack = require('webpack');
    const path = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    // const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const TerserPlugin = require("terser-webpack-plugin");
    
    const extractCSS = new ExtractTextPlugin('[name].fonts.css');
    const extractSCSS = new ExtractTextPlugin('[name].styles.css');
    // const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    const BUILD_DIR = '/Users/blakelucey/Desktop/fsd-next/build';
    //path.resolve(__dirname, 'build');
    const SRC_DIR = '/Users/blakelucey/Desktop/fsd-next/src';
    //path.resolve(__dirname, 'src');
    
    console.log('BUILD_DIR', BUILD_DIR);
    console.log('SRC_DIR', SRC_DIR);
    
    module.exports = (env = {}) => {
      return {
        entry: {
          index: [SRC_DIR + '/index.tsx']
        },
        output: {
          path: BUILD_DIR,
          filename: '[name].bundle.js'
        },
       // node: {
         //fs: "empty"
         //Buffer: false,
         //process: false,
        //},
        resolve: {
          extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', 'scss']
        },
        // watch: true,
       //devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
        devServer: {
          contentBase: BUILD_DIR,
          //   port: 9001,
          compress: true,
          hot: true,
          open: true
        },
         optimization: {
           //This moduleIDs throws an error. --> Per webpack this is updated form of NamedModulesPlugin()
          moduleIDs: 'named',
          minimize: true,
           minimizer: [
             new TerserPlugin()
        //     new UglifyJsPlugin({sourceMap: true})
           ],
         },
        module: {
          rules: [
            {
              test: /\.tsx?$/,
              use: [
                {
                  loader: 'ts-loader'
                }
              ],
            },
            {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                  presets: ['react', 'env']
                }
              }
            },
            {
              test: /\.html$/,
              loader: 'html-loader'
            },
            {
              test: /\.(scss)$/,
              use: ['css-hot-loader'].concat(extractSCSS.extract({
                fallback: 'style-loader',
                use: [
                  {
                    loader: 'css-loader',
                    options: { alias: { '../img': '../public/img' } }
                  },
                  {
                    loader: 'sass-loader'
                  }
                ]
              }))
              // loader: MiniCssExtractPlugin.loader
            },
            {
              test: /\.css$/,
              use: extractCSS.extract({
                fallback: 'style-loader',
                use: 'css-loader'
              })
              // loader: MiniCssExtractPlugin.loader
            },
            {
              test: /\.(png|jpg|jpeg|gif|ico)$/,
              use: [
                {
                  // loader: 'url-loader'
                  loader: 'file-loader',
                  options: {
                    name: './img/[name].[hash].[ext]'
                  }
                }
              ]
            },
            {
              test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'file-loader',
              options: {
                name: './fonts/[name].[hash].[ext]'
              }
            }]
        },
        plugins: [
          new webpack.HotModuleReplacementPlugin(),
          //new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
    
          //NamedModulesPlugin() may throw an error if Dockerfile is rearranged.
         //new webpack.NamedModulesPlugin(),
          extractCSS,
          extractSCSS,
          // new MiniCssExtractPlugin({
          //   // Options similar to the same options in webpackOptions.output
          //   // both options are optional
          //   filename: "[name].css",
          //   chunkFilename: "[id].css"
          // }),
          new HtmlWebpackPlugin(
            {
              inject: true,
              template: './public/index.html'
            }
          ),
          new CopyWebpackPlugin([
            { from: './public/img', to: 'img' }
          ],
            { copyUnmodified: false }
          ),
          new CopyWebpackPlugin([
            { from: './public/robot.txt', to: 'robot.txt' }
          ],
            { copyUnmodified: false }
          )
        ]
      }
    };

这是我的package.json:

    {
      "name": "fsdlogistics",
      "version": "1.0.0",
      "description": "FSD Logistics Order and Shipping Managment System",
      "author": "Mathieu Currie",
      "copyright": "Copyright 2018 FoodServiceDirect Logistics",
      "license": "MIT",
      "private": true,
      "devDependencies": {
        "@types/classnames": "^2.2.3",
        "@types/react": "^16.0.18",
        "@types/react-dom": "^16.0.2",
        "awesome-typescript-loader": "^3.2.3",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "copy-webpack-plugin": "^4.2.0",
        "css-hot-loader": "^1.3.2",
        "css-loader": "^0.28.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.5",
        "html-loader": "^0.5.1",
        "html-webpack-plugin": "^2.30.1",
        "husky": "^3.1.0",
        "node-sass": "^6.0.1",
        "prettier": "1.19.1",
        "pretty-quick": "^2.0.1",
        "rimraf": "^2.6.2",
        "sass-loader": "^6.0.6",
        "source-list-map": "^2.0.0",
        "style-loader": "^0.19.0",
        "typescript": "^4.4.3",
        "uglify-js": "^3.6.0",
        "url-loader": "^0.6.2",
        "webpack": "^5.58.2",
        "webpack-dev-server": "^3.11.2"
      },
      "dependencies": {
        "@date-io/date-fns": "1.3.11",
        "@mapbox/node-pre-gyp": "^1.0.5",
        "@material-ui/core": "4.9.8",
        "@material-ui/pickers": "^3.3.10",
        "@tecuity/barcode-generator": "^1.2.0",
        "axios": "^0.18.0",
        "bootstrap": "4.1",
        "canvas": "^2.8.0",
        "chart.js": "2.7.1",
        "core-js": "^3.18.2",
        "csv-parser": "^2.3.0",
        "date-fns": "2.11.1",
        "excel4node": "^1.6.0",
        "express": "^4.16.3",
        "express-fileupload": "^0.4.0",
        "font-awesome": "^4.7.0",
        "ftp": "^0.3.10",
        "history": "4.7.2",
        "html-pdf": "^3.0.1",
        "jquery": "^3.2.1",
        "jsbarcode": "^3.11.0",
        "moment": "^2.22.2",
        "moment-range": "^2.2.0",
        "moment-timezone": "^0.5.23",
        "multer": "^1.3.1",
        "mysql": "^2.16.0",
        "mysql2": "^2.2.5",
        "node-canvas": "^2.7.0",
        "react": "^16.0.0",
        "react-chartjs-2": "2.6.4",
        "react-date-range": "^1.0.0-beta",
        "react-dom": "^16.0.0",
        "react-moment": "^0.8.3",
        "react-router-dom": "^4.2.2",
        "react-transition-group": "^2.2.1",
        "reactstrap": "^5.0.0-alpha.3",
        "simple-line-icons": "^2.4.1",
        "solr": "^0.3.0",
        "styled-components": "^3.1.6",
        "terser": "^5.9.0",
        "ts-loader": "^9.2.6",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "webpack-cli": "^4.8.0",
        "xlsx": "^0.14.3"
      },
      "scripts": {
        "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
        "start": "webpack serve --mode='development'",
        "build": "webpack --progress",
        "clean": "rimraf ./build"
      },
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 5.0.0"
      },
      "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
        }
      }
    }

我已经尝试调试这个问题好几天了，但不确定问题出在哪里。任何帮助是极大的赞赏。谢谢。

Answer 1

我认为它区分大小写，即。将 D 更改为 d，将 moduleIDs 更改为 moduleIds。