Webpack 已使用与API架构不匹配的配置对象初始化Web包。-配置[0]具有未知属性'；模式'；

我正在学习教程，但是我遇到了一个关于web pack的问题。我犯了一个错误，运行了

npm audit fix

，还有一个更大的错误，就是没有注意到它做了什么

当我尝试运行

npm start

时，出现以下错误：

｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0] has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, extern

这就是我的

webpack.config.js

文件的外观：

function getStyleUse(bundleFilename) {
  return [
    {
      loader: 'file-loader',
      options: {
        name: bundleFilename,
      },
    },
    { loader: 'extract-loader' },
    { loader: 'css-loader' },
    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
  }
    },
  ];
}

module.exports = [
  {
    entry: './login.scss',
    output: {
      // This is necessary for webpack to compile, but we never reference this js file.
      filename: 'style-bundle-login.js',
    },
    module: {
      rules: [{
        test: /login.scss$/,
        use: getStyleUse('bundle-login.css')
      }]
    },
  },
  {
    entry: './home.scss',
    output: {
      // This is necessary for webpack to compile, but we never reference this js file.
      filename: 'style-bundle-home.js',
    },
    module: {
      rules: [{
        test: /home.scss$/,
        use: getStyleUse('bundle-home.css')
      }]
    },
  },
  {
    entry: "./login.js",
    output: {
      filename: "bundle-login.js"
    },
    module: {
      loaders: [{
        test: /login.js$/,
        loader: 'babel-loader',
        query: {presets: ['env']}
      }]
    },
  },
  {
    entry: "./home.js",
    output: {
      filename: "bundle-home.js"
    },
    module: {
      loaders: [{
        test: /home.js$/,
        loader: 'babel-loader',
        query: {presets: ['env']}
      }]
    },
  }
];

还有我的

package.json

{
  "name": "mdc-101-web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "start": "webpack-dev-server --progress"
  },
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.1",
    "dart-sass": "^1.17.2",
    "extract-loader": "^1.0.2",
    "fibers": "^3.1.1",
    "file-loader": "^1.1.11",
    "sass-loader": "^7.1.0",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "@material/button": "^1.0.1",
    "@material/ripple": "^1.0.1",
    "@material/textfield": "^1.0.1"
  }
}

---

我已尝试取消安装网页包：

npm uninstall-g webpack

还尝试删除

node\u模块

（

rm-rf node\u模块

）。我还尝试了

npm缓存清理--force

。我似乎无法回避这个问题。我在

webpack.config.js

中的任何地方或项目中的任何其他地方都看不到引用的

模式

属性。

在阅读步骤2中关于webpack的说明后：

有关如何配置的更多详细信息，请参阅

我看到这张纸条：

注意：我们建议使用Webpack3，因为我们仍在调查Webpack4的使用情况。我们还建议您使用WebpackDevServer2，因为它适用于Webpack3

运行此命令安装webpack 3后，它开始工作：

npm安装--保存开发webpack@3网页包开发-server@2css加载器sass加载器节点sass提取加载器文件加载器

有人想评论一下npm audit fix可能做了什么吗

      {
        loader: 'sass-loader',
        options: {
          sassOptions: {
            includePaths: [
              ['./node_modules']
            ]
          }
        }
      }

---

有关SASSOPTION中IncludePath的更多信息是。

将module.exports=[]更改为module.exports={}

抱歉，将此更改为where？module.exports=[应该是module.exports={