режим разработки веб-пакетов

Question

Я не могу настроить Webpack с реакцией в режиме разработки.

Вот мой пакет JSON:

  ...
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.1",
    "webpack": "^4.12.2",
    "webpack-stream": "^4.0.3"
  }
  ...

Я получаю это error в браузере:

Uncaught Error: Minified React error # 37; посетите http://facebook.github.io/react/docs/error-decoder.html?invariant=37 для получения полного сообщения или используйте неминифицированную среду разработки

Когда я устанавливаю веб-пакет в режим разработки:

const DIR_PAGES        = path.join(__dirname, 'pages');
const DIR_TARGET       = path.join(__dirname, '..', 'assets');
const DIR_TARGET_PAGES = path.join(__dirname, '..', 'assets', 'pages'); 
module.exports = {
    mode: "development",

    /**
     * DEFINE PAGES JS HERE
     */
    entry: {
        'test' : path.join(DIR_PAGES, 'test', 'test.js'),
    },


    resolve: {
        extensions: ['.js', '.jsx']
    },

    /**
     * HOW TO TRANSCODE JAVASCRIPT
     */
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },


    /**
     * OUTPUT LOCATION
     */
    output: {
        path: DIR_TARGET_PAGES,
        filename: '[name]/[name].js'
    },

};

Я строю, используя webpack-stream. вот моя задача сборки:

const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');

gulp.task('webpack', function() {
    return webpack_stream(webpack_config)
        .pipe(gulp.dest(DIR_TARGET_JS));
});

Я получаю это error при создании веб-пакета, используя gulp:

[13:57:12] 'webpack' errored after 161 ms
[13:57:12] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           mode: ...
         }
       })
     ]


...

Я не знаю, что делать, можете ли вы мне помочь, пожалуйста

Спасибо