结合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. });
  6. new WebpackDevServer(compiler, {
  7. // server and middleware options
  8. }).listen(8080, "localhost", function(err) {
  9. if(err) throw new gutil.PluginError("webpack-dev-server", err);
  10. // Server listening
  11. gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
  12. // keep the server alive or continue?
  13. // callback();
  14. });
  15. });

举例子

例子包含下面三个部分

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

gulpfile demo