Конфигурация Webpack не принимает опцию режима конфигурации

Question

** получая ошибку при попытке добавить опцию режима в конфигурацию webpack, мне нужно настроить {mode:'development' }, чтобы включить hmp, посмотрев на этот ответ github.com/webpack-contrib/webpack-hot-middleware/issues/… **

WebpackOptionsValidationError: Неверный объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API. - конфигурация имеет неизвестное свойство 'mode'. Эти свойства действительны: объект { amd?, залог?, кэш?, контекст?, зависимости?, devServer?, devtool?, entry, externals?, загрузчик?, модуль?, имя?, узел?, вывод?, производительность?, плагины?, профиль?, recordsInputPath?, recordsOutputPath?, recordsPath?, resol?, resolLoader?, stats?, target?, watch?, watchOptions? } Для опечаток: пожалуйста, исправьте их. Для параметров загрузчика: webpack 2 больше не позволяет настраивать пользовательские свойства в конфигурации. Загрузчики должны быть обновлены, чтобы разрешить передачу параметров через параметры загрузчика в module.rules. До обновления загрузчиков можно использовать LoaderOptionsPlugin для передачи этих параметров загрузчику: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // может применять это только для некоторых параметров модулей: { mode: ... } }) ] в веб-пакете (C:\Users\asdf\WebstormProjects\node_modules\webpack\lib\webpack.js:19:9) в объекте. (в Module._compile (внутренний /modules/cjs/loader.js:689:30) в Object.Module._extensions..js (внутренний /modules/cjs/loader.js:700:10) в Module.load (внутренний /modules/cjs/loader.js:599:32) в tryModuleLoad (внутренний /modules/cjs/loader.js:538:12) в Function.Module._load (внутренний /modules/cjs/loader.js:530:3) в Function.Module.runMain (внутренний /modules/cjs/loader.js:742:12) при запуске (внутренний /bootstrap/node.js:282:19) в bootstrapNodeJSCore (внутренний /bootstrap/node.js:743:3)

    /* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(
  commonConfig,
  {
    devtool: 'cheap-module-eval-source-map',
    entry: {
      main: ['babel-polyfill', 'webpack-hot-middleware/client', './app/index.js'],
    },
    output: {
      path: __dirname,
      publicPath: '/',
      filename: '[hash].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.mspcss/,
          use: [
            'style-loader',
            'css-loader?modules=true&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
            'resolve-url-loader',
            'sass-loader?sourceMap'
          ]
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
          BABEL_ENV: JSON.stringify('development'),
        },
        __DEV__: true,
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoErrorsPlugin(),
      new HtmlWebpackPlugin({
        title: 'some- Development',
        template: path.resolve(__dirname, 'index.ejs'),
        filename: path.resolve(__dirname, 'index.html'),
        favicon: 'favicon.ico',
        inject: 'body'
      }),

    ]
  }
)
/* eslint-enable */

Answer 1

Какую версию веб-пакета вы используете? Вы, вероятно, используете версию 2 или 3, и последняя версия webpack-dev-server (3.2.1) предназначена для webpack 4. У меня была та же проблема, и я исправил ее, установив webpack-dev-server версии 2.11.5

npm uninstall webpack-dev-server
npm i -D webpack-dev-server@2.11.5