Laravel Elixir Webpack Extension

laravel-elixir-webpack.js

var gulp = require('gulp');
var gulpWebpack = require('webpack-stream');
var Elixir = require('laravel-elixir');

var $ = Elixir.Plugins;
var config = Elixir.config;

/*
 |----------------------------------------------------------------
 | Webpack Compilation
 |----------------------------------------------------------------
 |
 | This task allowed you to integrate Webpack into your main Gulp
 | and Laravel ELixir workflow. Want Webpack module bundling,
 | but Elixir CSS compilation and versioning? No problem!
 |
 */

Elixir.extend('webpack', function (src, output, baseDir, options) {
    var paths = prepGulpPaths(src, output, baseDir);

    this.onWatch(() => gulp.start('webpack'));

    return new Elixir.Task('webpack', function () {
        this.log(paths.src, paths.output);

        gulpTask(paths, options);
    });
});


/**
 * Create the Gulp task.
 *
 * @param  {GulpPaths} paths
 * @param  {object}    options
 * @return {mixed}
 */
function gulpTask(paths, options) {
    return (
        gulp
        .src(paths.src.path)
        .pipe(webpack(options))
        .on('error', function(e) {
            new Elixir.Notification('Webpack Compilation Failed!');

            this.emit('end');
        })
        .pipe($.rename(paths.output.name))
        .pipe($.if(config.production, $.uglify(config.js.uglify.options)))
        .pipe(gulp.dest(paths.output.baseDir))
        .pipe(new Elixir.Notification('Webpack Compiled!'))
    );
}


/**
 * Prepare the Gulp src and output paths.
 *
 * @param  {mixed}       src
 * @param  {string|null} output
 * @param  {string|null} baseDir
 * @return {void}
 */
function prepGulpPaths(src, output, baseDir) {
    return new Elixir.GulpPaths()
        .src(src, baseDir || config.get('assets.js.folder'))
        .output(output || config.get('public.js.outputFolder'), 'bundle.js')
}


/**
 * Fetch the appropriate Webpack configuration.
 *
 * @param  {object|null} options
 * @return {object}
 */
function webpack(options) {
    return gulpWebpack(options || {
        watch: Elixir.isWatching(),
        module: {
            loaders: [
                { test: /\.js$/, loader: 'buble' }
            ]
        }
    }, require('webpack'));
}

package.json

{
  "devDependencies": {
    "buble": "^0.7.0",
    "buble-loader": "^0.2.1",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-2",
    "webpack": "^2.1.0-beta.7",
    "webpack-stream": "^3.2.0"
  }
}

Maybe we can also include vue-loader? For .vue files? I tried but failed using:

                loaders: [
                    {test: /\.js$/, loader: 'buble'},
                    {test: /\.vue$/, loader: 'vue'}
                ]