Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API.- конфигурация [0] имеет неизвестное свойство 'mode'

Question

Я следую учебному пособию для Основы проектирования компонентов материалов , и у меня возникла проблема с веб-пакетом. Я сделал ошибку, запустив 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_modules (rm -rf node_modules). Я также попробовал npm cache clean --force. Я не могу обойти эту проблему. Я не вижу свойства mode, на которое есть ссылки нигде в webpack.config.js, ни где-либо еще в проекте.

Answer 1

После прочтения заметок о веб-пакете на шаге 2:

Подробнее о настройке см. Руководство по началу работы .

Я видел эту заметку:

Примечание: мы рекомендуем использовать webpack 3, потому что мы все еще исследуем использование webpack 4. Мы также рекомендуем использовать webpack-dev-server 2, потому что это работает с webpack 3.

После запуска этой команды для установки webpack 3 она заработала:

npm install --save-dev webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

Кто-нибудь хочет прокомментировать, что, возможно, npm audit fix сделал?