A simple Webpack (with Dev Server) + Gulp Configuration + LiveReload + Babel to playground where you can code ES6 without the need for React

README.md

A simple Webpack + Gulpfile configuration wihtout any need for React.js that assumes you have the following project structure:

node_modules/ bower_components/ scripts/

Entry script is in scripts/entry.js

You should run gulp && gulp build-dev and you are good to go.

gulpfile.js

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    connect = require('gulp-connect'),
    proxy = require('./util/proxy.js')(),
    sourcemaps = require('gulp-sourcemaps'),
    babel = require('gulp-babel'),
    concat = require('gulp-concat'),
    gutil = require('gulp-util'),
    webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    webpackConfig = require('./webpack.config.js'),
    paths = {
        scripts: 'scripts/*.js',
        style_css: 'styles/css',
        style_sass: 'styles/sass/'
    },
    LOCAL_SERVER_PORT = 4000;

gulp.task('jshint', function() {
    return gulp.src(paths.scripts)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('default', ['webpack:build-dev', 'webpack-dev-server']);

gulp.task('build-dev', ['webpack:build-dev'], function() {
    gulp.watch(['scripts/**/*'], ['webpack:build-dev']);
});

// Production build
gulp.task('build', ['webpack:build']);

gulp.task('webpack:build', function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.plugins = myConfig.plugins.concat(
        new webpack.DefinePlugin({
            'process.env': {
                // This has effect on the react lib size
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    );

    // run webpack
    webpack(myConfig, function(err, stats) {
        if(err) throw new gutil.PluginError('webpack:build', err);
        gutil.log('[webpack:build]', stats.toString({
            colors: true
        }));
        callback();
    });
});

// modify some webpack config options
var myDevConfig = Object.create(webpackConfig);
myDevConfig.devtool = 'sourcemap';
myDevConfig.debug = true;

// create a single instance of the compiler to allow caching
var devCompiler = webpack(myDevConfig);

gulp.task('webpack:build-dev', function(callback) {
    // run webpack
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError('webpack:build-dev', err);
        gutil.log('[webpack:build-dev]', stats.toString({
            colors: true
        }));
        callback();
    });
});

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
        },
        contentBase: 'dist/'
    }).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');
        proxy.run();
    });
});

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');


module.exports = {
    entry: "./scripts/main-es6",
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'entry.js',
        publicPath: 'dist/'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style!css"
        }, {
            test: /\.png$/,
            loader: "file-loader"
        }, {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader'
        }]
    }
};

What the './util/proxy.js' do ? that could proxy some request to other server?

what is in proxy?

You're running webpack once in webpack:build-dev and then again in webpack-dev-server. So, bundling twice?

What's in proxy.js?