usage with gulp.cn

Using webpack with gulp is as easy as using the node.js API.

结合gulp使用webpack跟使用node.js API一样简单。

Using webpack-stream

使用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 (webpack generated hash of the build).

上述会用webpack将src/entry.js及相关资源编译打包到dist/目录，而输出的文件名是[hash].js

Or just pass in your webpack.config.js:

或者传入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.

更多选项及详细信息参见webpack-stream

Without webpack-stream

不用webpack-stream

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.

不要为了偷懒而不将webpack-dev-server集成到开发流中。这工具对于高效开发很重要。

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:

看一下一个gulpfile样例。它包含了三种模式：

• webpack-dev-server

• build - watch cycle

• production build

• webpack-dev-server

• 构建-监视 迭代

• 发布的构建

gulpfile样例