usage with gulp

Using webpack with gulp is as easy as using the node.js API.

var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");

Normal compilation

gulp.task("webpack", function(callback) {
	// run webpack
	webpack({
		// configuration
	}, function(err, stats) {
		if(err) throw new gutil.PluginError("webpack", err);
		gutil.log("[webpack]", stats.toString({
			// output options
		}));
		callback();
	});
});

Use with gulp-webpack

gulp-webpack is a plugin that streams assets from webpack allowing a more idiomatic gulp way of building with webpack. First install with npm install gulp-webpack and then use as follows:

var gulp = require('gulp');
var webpack = require('gulp-webpack');
gulp.task("webpack", function() {
	return gulp.src('src/entry.js')
		.pipe(webpack({ /* webpack configuration */ }))
		.pipe(gulp.dest('dist/'));
});

Use with gulp-webpack-build

gulp-webpack-build also is a plugin that streams assets from webpack allowing a more idiomatic gulp way of building with webpack, but it uses webpack.config.js as source for stream instead of referencing entries.

It has some benefits:

• overrides any properties of config files via webpack.props;
• uses memory file system to prevents write files on disk via webpack.init({useMemoryFs: true});
• controls webpack stats output via webpack.format;
• fails your build if webpack returns some errors or warnings via webpack.failAfter;
• just compiles config files via webpack.run;
• works in watching mode via webpack.watch.

First install with npm install gulp-webpack-build and then use as follows:

'use strict';

var path = require('path'),
    gulp = require('gulp'),
    webpack = require('gulp-webpack-build');

var src = './src',
    dest = './dist',
    webpackOptions = {
        debug: true,
        devtool: '#source-map',
        watchDelay: 200
    },
    webpackConfig = {
        useMemoryFs: true,
        progress: true
    },
    CONFIG_FILENAME = webpack.config.CONFIG_FILENAME;

gulp.task('webpack', [], function() {
    return gulp.src(path.join(src, '**', CONFIG_FILENAME), { base: path.resolve(src) })
        .pipe(webpack.init(webpackConfig))
        .pipe(webpack.props(webpackOptions))
        .pipe(webpack.run())
        .pipe(webpack.format({
            version: false,
            timings: true
        }))
        .pipe(webpack.failAfter({
            errors: true,
            warnings: true
        }))
        .pipe(gulp.dest(dest));
});

gulp.task('watch', function() {
    gulp.watch(path.join(src, '**/*.*')).on('change', function(event) {
        if (event.type === 'changed') {
            gulp.src(event.path, { base: path.resolve(src) })
                .pipe(webpack.closest(CONFIG_FILENAME))
                .pipe(webpack.init(webpackConfig))
                .pipe(webpack.props(webpackOptions))
                .pipe(webpack.watch(function(err, stats) {
                    gulp.src(this.path, { base: this.base })
                        .pipe(webpack.proxy(err, stats))
                        .pipe(webpack.format({
                            verbose: true,
                            version: false
                        }))
                        .pipe(gulp.dest(dest));
                }));
        }
    });
});

webpack-dev-server

Don't be too lazy to integrate the webpack-dev-server into your development process. It's an important tool for productivity.

gulp.task("webpack-dev-server", function(callback) {
	// Start a webpack-dev-server
	var compiler = webpack({
		// configuration
	});

	new WebpackDevServer(compiler, {
		// server and middleware options
	}).listen(8080, "localhost", function(err) {
		if(err) throw new gutil.PluginError("webpack-dev-server", err);
		// Server listening
		gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");

		// keep the server alive or continue?
		// callback();
	});
});

Example

Take a look at a example gulpfile. It covers three modes:

• webpack-dev-server
• build - watch cycle
• production build

Example gulpfile