Wie man Gulp mit Babel und Webpack einrichtet

Question

Ich erstelle eine Nodejs App und da sie keine Module lädt (Import) Features unterstützt, möchte ich Babel/Webpack nutzen, um dies zu tun.

Kann mir jemand helfen, diese so einrichten, es ist mein Server ausgeführt wird, kompiliert alles, prüft, ob Änderungen nur durch "Schluck"

Gulp läuft:

var gulp  = require('gulp'); 
var nodemon = require('gulp-nodemon'); 
var notify  = require('gulp-notify'); 
var livereload = require('gulp-livereload'); 
var webpack = require('webpack-stream'); 

gulp.task('es6',() => { 

    return gulp.src('index.js') 
       .pipe(webpack(require('./webpack.config.js'))); 
}); 

gulp.task('listen',() => { 

    livereload.listen(); 

    nodemon({ 
     script: 'index.js', 
     ext: 'js' 
    }).on('restart',() => { 
     gulp.src('index.js') 
      .pipe(livereload()) 
      .pipe(notify('Reloading page, please wait...')); 
    }); 

}); 

gulp.task('default', ['es6', 'listen'],() => { 
}); 

Webpack:

module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel', // 'babel-loader' is also a legal name to reference 
      query: { 
       presets: ['es2015'] 
      } 
     } 
    ] 
} 

Answer 1

In diesem Repository habe ich ein Beispiel für Sie erstellt.

https://github.com/synthecypher/babel-gulp-webpack

const gulp    = require('gulp'); 
const gutil   = require('gulp-util'); 
const webpack   = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 

// webpack-dev-server will build files and serve them from memory (no files written to disk). 
gulp.task('default', (callback) => { 
    let config = require('./webpack.config'); 
    config.entry.app.unshift(`webpack-dev-server/client?http://${config.devServer.host}:${config.devServer.port}/`); 
    new WebpackDevServer(new webpack(config), config.devServer) 
    .listen(config.devServer.port, config.devServer.host, (err) => { 
     if (err) throw new gutil.PluginError('webpack-dev-server', err); 
     gutil.log(gutil.colors.cyan(`http://${config.devServer.host}:${config.devServer.port}`)); 
    }); 
}); 

// output will be built to the `dist` folder. 
gulp.task('build', (callback) => { 
    let config = require('./webpack.config.js'); 
    webpack(config, (err, stats) => { 
    if (err) throw new gutil.PluginError("webpack", err); 
    stats.toString(config.devServer.stats).split('\n').map((line) => { 
     gutil.log(gutil.colors.blue("[webpack]"), line); 
    }); 
    callback(); 
    }); 
});