This repository was archived by the owner on Aug 8, 2019. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork 125
usage with gulp
Zearin edited this page Sep 5, 2016 · 20 revisions
Using webpack with gulp is as easy as using the node.js API.
Using webpack-stream
var gulp = require('gulp'); var webpack = require('webpack-stream'); gulp.task('default', function() { return gulp.src('src/entry.js') .pipe(webpack()) .pipe(gulp.dest('dist/')); });The above will compile src/entry.js into assets with webpack into dist/ with the output filename of «hash».js (a webpack-generated hash of the build).
Or just pass in your webpack.config.js:
return gulp.src('src/entry.js') .pipe(webpack( require('./webpack.config.js') )) .pipe(gulp.dest('dist/'));See webpack-stream for more options and details.
var gulp = require("gulp"); var gutil = require("gulp-util"); var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server");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(); }); });Don't be too lazy to integrate the
webpack-dev-serverinto 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(); }); });Take a look at an example gulpfile. It covers three modes:
- webpack-dev-server
- build - watch cycle
- production build
webpack 👍