How to show webpack errors in gulp?

@raphael_tillman 

To show webpack errors in gulp, you can use the following steps:

1. Install the necessary packages. You will need gulp, webpack, webpack-stream, and gulp-util. You can install them using the following command:

1

npm install --save-dev gulp webpack webpack-stream gulp-util

1. Import the required packages at the top of your gulpfile.js:

1
2
3
4

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const gutil = require('gulp-util');

1. Define a function that will handle the webpack task:

1
2
3
4
5
6
7
8
9

function webpackTask() {
  return gulp.src('src/index.js') // your entry point file
    .pipe(webpackStream(require('./webpack.config.js'), webpack))
    .on('error', function (err) {
      gutil.log(gutil.colors.red(err.toString()));
      this.emit('end');
    })
    .pipe(gulp.dest('dist')); // the output directory
}

In the above code, we are piping the files to webpack using webpackStream, and handling webpack errors using .pipe(on('error', function (err) { ... })). The error details are logged in red using gutil.log(gutil.colors.red(err.toString()));.

1. Define a gulp task that calls the webpack task:

1

gulp.task('webpack', webpackTask);

1. Run gulp webpack command to execute the task and check the terminal for any webpack errors. If there are any errors, they will be shown in red.

Now, whenever there is a webpack error, it will be logged in the terminal using gulp-util.log() and the error details will be displayed in red color.