gulp-webpack を使って、 gulp から webpack を利用してみる。

今回の環境: Mac OS X Yosemite


$ uname -mrsv
Darwin 14.3.0 Darwin Kernel Version 14.3.0: Mon Mar 23 11:59:05 PDT 2015; root:xnu-2782.20.48~5/RELEASE_X86_64 x86_64

$ node -v
v0.10.29

$ npm -v
1.4.14

npm で gulp と webpack と gulp-webpack パッケージをインストール。


$ npm install gulp webpack gulp-webpack

今回のサンプルコードは [ヅ] webpack をインストールして hello, world なサンプルを書いてみる (2015-04-28) で使ったのと同じ。

foo.js が bar.js を利用するシンプルなサンプル。


$ cat foo.js 

var bar = require('./bar');
bar.hoge('hello, world');

$ cat bar.js 

function my_alert(message){
  alert(message);
}

module.exports = {
  hoge: my_alert
};

webpack の設定ファイル webpack.config.js を用意。


$ cat webpack.config.js 

module.exports = {
  entry: './foo.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
};

ただ、 output.path で設定したディレクトリよりも、 gulp の設定ファイル gulpfile.js に書かれた出力先ディレクトリが優先されるため、ここに記述した output.path の内容は無視されているようだ。

gulp の設定ファイル gulpfile.js を用意。


$ cat gulpfile.js 

var gulp = require('gulp');
var webpack = require('gulp-webpack');
 
gulp.task('default', function(){
  return gulp.src('')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest(''));
});

gulp.dest に指定した出力先ディレクトリは、webpack.config.js で指定した出力先ディレクトリよりも優先される。そのため、出力先ディレクトリは gulp.dest の引数にちゃんと指定する。

試しに gulp.src とか gulp.dest を削除して試してみたが、エラーが発生したり、出力されなかったりと、ちゃんと動作しない。

gulp コマンドを実行する。


$ ./node_modules/.bin/gulp
[09:24:50] Using gulpfile ~/hoge/gulpfile.js
[09:24:50] Starting 'default'...
[09:24:50] Version: webpack 1.8.11
    Asset     Size  Chunks             Chunk Names
bundle.js  1.65 kB       0  [emitted]  main
[09:24:50] Finished 'default' after 248 ms

foo.js と bar,js と webpack による require 機構の実装が結合されて、bundle.js に出力される。


$ cat bundle.js 
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

(中略)

/* 0 */
/***/ function(module, exports, __webpack_require__) {

	
	var bar = __webpack_require__(1);
	bar.hoge('hello, world');



/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

	
	function my_alert(message){
	  alert(message);
	}

	module.exports = {
	  hoge: my_alert
	};



/***/ }
/******/ ]);

bundle.js がちゃんと動作するか以下の HTML で確認すると、ちゃんとアラートダイアログが表示される。


$ cat index.html 

<html>
<head>
<script type="text/javascript" charset="utf-8" src="bundle.js"></script>
</head>
<body>
</body>
</html>

tags: gulp webpack javascript

Posted by NI-Lab. (@nilab)