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();
    });
});

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 an example gulpfile. It covers three modes:

webpack-dev-server
build - watch cycle
production build

Example gulpfile

Links:

https://webpack.github.io/docs/usage-with-gulp.html

doc_Webpack

2025-01-10 15:47:30

Comments