webpack doc

结合gulp使用和node.js API一样简单.

运用 webpack-stream

  1.     var gulp = require('gulp');
  2.     var webpack = require('webpack-stream');
  3.     gulp.task('default', function() {
  4.       return gulp.src('src/entry.js')
  5.         .pipe(webpack())
  6.         .pipe(gulp.dest('dist/'));
  7.     });

上面的例子，将 src/entry.js 用webpack打包到dist/ 当中，输出的文件名，由webpack的build hash [hash].js 产生

你也可以将webpack.config.js传到gulp流里面：

  1.     return gulp.src('src/entry.js')
  2.       .pipe(webpack( require('./webpack.config.js') ))
  3.       .pipe(gulp.dest('dist/'));

可以查看更多 webpack-stream 相关。

不使用 webpack-stream

  1.     var gulp = require("gulp");
  2.     var gutil = require("gulp-util");
  3.     var webpack = require("webpack");
  4.     var WebpackDevServer = require("webpack-dev-server");

一般的编译过程

  1.     gulp.task("webpack", function(callback) {
  2.         // run webpack
  3.         webpack({
  4.             // configuration
  5.         }, function(err, stats) {
  6.             if(err) throw new gutil.PluginError("webpack", err);
  7.             gutil.log("[webpack]", stats.toString({
  8.                 // output options
  9.             }));
  10.             callback();
  11.         });
  12.     });

webpack-dev-server

webpack-dev-server是一个重要的辅助开发的工具

  1.     gulp.task("webpack-dev-server", function(callback) {
  2.         // Start a webpack-dev-server
  3.         var compiler = webpack({
  4.             // configuration
  5.         });
  7.         new WebpackDevServer(compiler, {
  8.             // server and middleware options
  9.         }).listen(8080, "localhost", function(err) {
  10.             if(err) throw new gutil.PluginError("webpack-dev-server", err);
  11.             // Server listening
  12.             gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
  14.             // keep the server alive or continue?
  15.             // callback();
  16.         });
  17.     });

举例子

例子包含下面三个部分

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

gulpfile demo