How to use gulp webpack-stream to generate a proper named file?

Question

Currently we\'re using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process)

Answer 1

As recommended in docs you should use the vinyl-named package on the pipe before webpack-stream. This way you can use a more cleaner Webpack configuration. The following is the task definition i use myself:

'use strict';

const gulp = require('gulp'),
      named = require('vinyl-named'),
      webpack = require('webpack-stream');

gulp.task('webpack', function () {
  gulp.src(['./src/vendor.js', './src/bootstrap.js', './src/**/*.spec.js'])
      .pipe(named())
      .pipe(webpack({
        module: {
          loaders: [
            {
              test: /\.js$/,
              loader: 'babel',
              query: {
                presets: ['es2015', 'angular2']
              }
            }
          ]
        }
      }))
      .pipe(gulp.dest('./build'))
});

The only problem i'm facing with this task definition is that the subfolder are loosed. For example ./src/components/application.spec.js will produce ./build/application.spec.js instead of ./build/components/application.spec.js.