In general, I try to configure the Gulp + Webpack + React environment and run into this error when launching the task:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'debug'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } The 'debug' property was removed in webpack 2. Loaders should be updated to allow passing this option via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to switch loaders into debug mode: plugins: [ new webpack.LoaderOptionsPlugin({ debug: true }) ] at webpack (/home/alexander/projects/webpack/node_modules/webpack/lib/webpack.js:19:9) at Gulp.<anonymous> (/home/alexander/projects/webpack/gulpfile.js:30:26) at module.exports (/home/alexander/projects/webpack/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/home/alexander/projects/webpack/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/home/alexander/projects/webpack/node_modules/orchestrator/index.js:214:10) at Gulp.Orchestrator.start (/home/alexander/projects/webpack/node_modules/orchestrator/index.js:134:8) at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20 at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9) at Module.runMain (module.js:606:11)

I do not understand where the problem is. Just running the webpack config does not issue errors. Below are configs: webpack.config.js

 var path = require("path"); var webpack = require("webpack"); module.exports = { cache: true, entry: [ './frontend/js/index.js' ], output: { path: path.join(__dirname, "dist"), publicPath: "dist/", filename: "[name].js", chunkFilename: "[chunkhash].js" }, module: { loaders: [ // required to write "require('./style.css')" { test: /\.css$/, loader: "style-loader!css-loader" }, // required for bootstrap icons { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" }, { test: /\.ttf$/, loader: "file-loader?prefix=font/" }, { test: /\.eot$/, loader: "file-loader?prefix=font/" }, { test: /\.svg$/, loader: "file-loader?prefix=font/" }, // required for react jsx { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/, } ] }, resolve: { alias: { // Bind version of jquery jquery: "jquery-2.0.3", // Bind version of jquery-ui "jquery-ui": "jquery-ui-1.10.3", // jquery-ui doesn't contain a index file // bind module to the complete module "jquery-ui-1.10.3$": "jquery-ui-1.10.3/ui/jquery-ui.js", } }, plugins: [ new webpack.LoaderOptionsPlugin({ debug: true }), new webpack.ProvidePlugin({ // Automtically detect jQuery and $ as free var in modules // and inject the jquery library // This is required by many jquery plugins jQuery: "jquery", $: "jquery" }) ] };

gulpfile.js

  var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sourcemaps'); var gutil = require("gulp-util"); var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server"); var webpackConfig = require("./webpack.config.js"); var stream = require('webpack-stream'); gulp.task('webpack', [], function() { return gulp.src(path.ALL) .pipe(sourcemaps.init()) .pipe(stream(webpackConfig)) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest(path.DEST_BUILD)); }); gulp.task("webpack-dev-server", function(callback) { // modify some webpack config options var myConfig = Object.create(webpackConfig); myConfig.devtool = "eval"; myConfig.debug = true; // Start a webpack-dev-server new WebpackDevServer(webpack(myConfig), { publicPath: "/" + myConfig.output.publicPath, stats: { colors: true } }).listen(8080, "localhost", function(err) { if (err) throw new gutil.PluginError("webpack-dev-server", err); gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html"); }); }); var path = { HTML: 'src/index.html', ALL: ['src/**/*.jsx', 'src/**/*.js'], MINIFIED_OUT: 'build.min.js', DEST_SRC: 'dist/src', DEST_BUILD: 'dist/build', DEST: 'dist' }; gulp.task('watch', function() { gulp.watch(path.ALL, ['webpack']); }); gulp.task('default', ['webpack-dev-server', 'watch']);
  • After all, the The 'debug' property was removed in webpack 2. Crystal' is clearly hinting at The 'debug' property was removed in webpack 2. - YozhEzhi

2 answers 2

In general, if anyone come in handy! Connections and tasks do not post everything

 /* ** gulpfile.js */ const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const browserSyncW = require('browser-sync').create(); const reload = browserSyncW.reload; const webpackConfig = require('./webpack.config'); const bundler = webpack(webpackConfig); const proxyMiddleware = require('http-proxy-middleware'); const notify = require('gulp-notify'); gulp.task('browser-syncW', function () { browserSyncW.init({ server: { baseDir: 'public', index: 'index.htm', middleware: [ webpackDevMiddleware(bundler, { publicPath: webpackConfig.output.publicPath, stats: { colors: true } }), webpackHotMiddleware(bundler), modRewrite([ '!^/js|css|img|icons|static|locales/ /index.htm [L]' ]), proxyMiddleware('/api', { target: 'http://localhost:8888' }), proxyMiddleware('/oauth', { target: 'http://localhost:8888' }) ] } }); }); gulp.task('style', function () { gulp.src('./source/styles/**/*.scss') .pipe(sass({ includePaths: ['source/styles/'], outputStyle: 'compressed', sourceMap: true, errLogToConsole: true, functions: inline_image({url:'source/images/'}) }) .on("error", notify.onError(function (error) { return "Error: " + error.message; })) ) .pipe(gulp.dest(distCSS)) .pipe(reload({stream: true})); }); gulp.task('webpack', [ 'style', 'browser-syncW', ], function () { gulp.watch('./source/styles/**/*.scss', ['style']); }); /* ** webpack.config.js */ var webpack = require('webpack'); var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack/hot/dev-server', 'webpack-hot-middleware/client?http://localhost:3000', 'react-hot-loader/patch', './source/js/index.js' ], output: { filename: 'bundle.js', path: path.join(__dirname, 'dist'), publicPath: '/dist' }, plugins: [ new webpack.HotModuleReplacementPlugin() ], resolve: { modules: [path.resolve(__dirname, "source/js"), "node_modules"] }, module: { loaders: [{ test: /\.js?$/, exclude: /(node_modules|source\/js)/, loader: 'react-hot-loader/webpack', include: path.join(__dirname, 'source/js') }, { test: /\.js?$/, exclude: /node_modules/, loaders: 'babel-loader', query: { presets: ['es2015', 'react'] } }, // { // test: /\.js$/, // exclude: /(node_modules|booking)/, // loader: 'eslint-loader' // } ] } };
  • Thanks, it helped me a lot! - Timofey Orischenko 6:55 pm

Based on the documentation, try:

 new webpack.LoaderOptionsPlugin({ options: { debug: true } })
  • Naturally tried, but the result is exactly the same ... - Alexandr Kiseloy
  • Maybe you have a working assembly of such a bundle? - Alexandr Kiseloy
  • I have not used such settings and parameters. - YozhEzhi