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 - Fork128
usage with gulp
Zearin edited this pageSep 5, 2016 ·20 revisions
Using webpack with gulp is as easy as using thenode.js API.
Usingwebpack-stream
vargulp=require('gulp');varwebpack=require('webpack-stream');gulp.task('default',function(){returngulp.src('src/entry.js').pipe(webpack()).pipe(gulp.dest('dist/'));});
The above will compilesrc/entry.js into assets with webpack intodist/ with the output filename of«hash».js (a webpack-generated hash of the build).
Or just pass in yourwebpack.config.js:
returngulp.src('src/entry.js').pipe(webpack(require('./webpack.config.js'))).pipe(gulp.dest('dist/'));
Seewebpack-stream for more options and details.
vargulp=require("gulp");vargutil=require("gulp-util");varwebpack=require("webpack");varWebpackDevServer=require("webpack-dev-server");
gulp.task("webpack",function(callback){// run webpackwebpack({// configuration},function(err,stats){if(err)thrownewgutil.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-servervarcompiler=webpack({// configuration});newWebpackDevServer(compiler,{// server and middleware options}).listen(8080,"localhost",function(err){if(err)thrownewgutil.PluginError("webpack-dev-server",err);// Server listeninggutil.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 👍