在昨天的 <27 - 番外篇 01> webpack 與 gulp 聯手 - 安裝 gulp 文章當中，已經瞭解到如何整合 webpack 與 gulp，只要執行 gulp webpack 指令，就可以執行 webpack 了。

但還有另外一樣東西是 webpack-dev-server，進一步我希望在每次執行 gulp 的時候，也要能執行 webpack-dev-server 以及 webpack 指令。

先修改 webpack.config.js

由於我在實際測試的過程當中，發現 output.path 一定要寫成絕對路徑，才能測試通過，否則會有錯誤訊息。

故先新增第一行，將 path require 進來，不需要安裝，這是預設就有的：

var path = require('path');

然後再將以下的部份：

…

module.exports = {
  entry: {
    …
  },
  output: {
     …
     path: './dist',
     …
  }
  …
}

修改成：

…

module.exports = {
  entry: {
    …
  },
  output: {
     …
     path: path.resolve(__dirname, 'dist'),
     …
  }
  …
}

這樣就可以囉。

修改 gulpfile.js

以下修改兩個部份：

• 將 webpack-dev-server 給 require 進來。
• 建立一個名稱為 webpack-dev-server 的 task。

var gulp = require('gulp');
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");

…

gulp.task("webpack-dev-server", function(callback) {
	var myConfig = Object.create(webpackConfig);

	// Start a webpack-dev-server
	new WebpackDevServer(webpack(myConfig), {
		publicPath: "/" + myConfig.output.publicPath,
		stats: {
			colors: true
		}
	}).listen(8080, "localhost", function(err) {
		if(err) throw new gutil.PluginError("webpack-dev-server", err);
		gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
	});
});

接下來只要再執行 gulp webpack-dev-server 就相當於執行 webpack-dev-server 指令了。

然而我希望只要執行 gulp 指令時，就可以先執行 webpack-dev-server 任務，再執行 webpack 任務，那我就將 gulpfile.js 的以下這行：

gulp.task('default', function() {
  …
});

改成：

gulp.task("default", ["webpack-dev-server", "webpack"]);

這時我只要執行 gulp 指令，就會依序執行 webpack-dev-server 任務，再執行 webpack 任務。

大功告成，這樣就很順利的利用 gulp 將各種任務(以此例就是 webpack 及 webpack-dev-server 兩個任務)串連起來了。

敬請期待明天最後的番外篇~