gulpfile.js

const gulp = require('gulp');

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.js');

gulp.task('js:build', function (done) {
	webpack(webpackConfig('js:build'), function (err, stats) {
		if (err) {
			throw err;
		}

		console.log(stats.toString({ colors: true }));

		done();
	});
});

gulp.task('js:dev', function (done) {
	const compiler = webpack(webpackConfig('js:dev'));

	new WebpackDevServer(compiler, {
		stats: { colors: true },
	}).listen(8080, 'localhost', function (err) {
		if (err) {
			throw err;
		}

		console.log('Server started. http://localhost:8080/');
	})
});

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
	src: path.join(__dirname, 'src'),
	dest: path.join(__dirname, 'dist')
};

module.exports = function (task) {
	const babelPresets = ['es2015', 'react'];

	if (task === 'js:dev') {
		babelPresets.push('react-hmre');
	}

	const plugins = [];

	if (task === 'js:dev') {
		plugins.push(...[
			new webpack.optimize.OccurenceOrderPlugin(),
			new webpack.HotModuleReplacementPlugin(),
			new webpack.NoErrorsPlugin(),
			new HtmlWebpackPlugin({
				title: 'Webpack demo',
				inject: true
			})
		])
	}

	console.log(plugins);

	return {
		entry: path.join(PATHS.src, 'js/app.js'),
		output: {
			path: PATHS.dest,
			filename: 'bundle.js'
		},
		plugins: plugins,
		module: {
			loaders: [
				{
					test: /\.js$/,
					loader: 'babel',
					include: PATHS.src,
					query: {
						presets: babelPresets
					}
				}
			]
		}
	};
};