webpack + Riot.js + jadeで開発環境を作った話

はじめに

今までgulpを使って自動で.jsやら.scssをコンパイルするようにしていたが、今回はよく耳にするwebpackを使って開発環境を作ってみたお話。（最近触り始めてかなり気に入っている） もちろんgulp-*モジュールをフルに使えばできることだが、webpackの方が圧倒的に楽らしい。

※1 gulp-webpackというモジュールを使ってgulpだけで全て解決することも可能。
※2 今回作った環境構築用のソースコードはこちら。かなり簡単なものじゃね。
※3 この記事はいわゆるhow-toではないので、それが目的の方は別の方の記事を探してみて下さい。

具体的にやりたかったことは、最近はもっぱらテンプレートとしてjadeを利用しているため、jadeのままriotのコンパイルにかけたい。ついでに一つのjsファイルとして出力したい。 それを簡単にできたら良いなと。

使ったモジュールリスト

今回npmからインストールしたモジュールはこちら。

• riot
• gulp
• webpack
• webpack-dev-server
• jade
• tag-loader

package.jsonの記述はこんな感じ。

{
  "name": "riot-webpack",
  "main"   : "build/bundle.js",
  "scripts": {
    "start": "webpack-dev-server --progress --colors -d --port 8000"
  },
  "dependencies": {
    "riot"   : "^2.6.2",
    "webpack": "^1.13.2"
  },
  "devDependencies": {
    "tag-loader": "^0.3.0",
    "jade"      : "^1.11.0",
    "webpack-dev-server": "^1.16.1"
  }
}

webpackの設定

webpack.config.jsは以下。

var webpack = require('webpack')

module.exports = {
   entry: './src/main.js',
   output: {
      path: __dirname + '/build',
      filename: 'bundle.js'
   },
   devServer: {
      port: 8000
   },
   module: {
      loaders: [
         {
            test: /\.tag$/,
            exclude: /node_modules/,
            loader: 'tag-loader',
            query: {
               template: 'jade',
               presets: ['es6']
            }
         }
      ]
   }
}

とりあえずの勉強段階なので物凄くシンプルなものにしたが、これでもgulpとの差が出ている。

	webpack	gulp
設定ファイル	webpack.config.js	gulpfile.js
記述量	短め	ガチでやると長め
記述の仕方	JSON形式	gulpの仕様に沿ったjavascript
実行速度	そんなに変わらない	ただ、今は簡単な事しかやらせてない
自動更新設定	コマンドから実行可能	gulpfile.jsに記載する必要がある
build時間	デフォルトで表示	別途設定する必要がある

最後のbuildにかかる時間の表示はいらないといえばいらないが、速度の比較をする上ではありがたかった。 さらにJSON形式というのが分かりやすくてGood。使った感想は正直webpackの方が今のところ使いやすく、良いなぁといった感じ。

今後の課題

今回はまだ触り程度なので、今後やりたいことはこんなところ

• sass-loader等を使って.scssファイルをコンパイル
• 更にコンパイルした書くcssファイルを一つのcssファイルに出力
• 更に.js,.cssファイルをminify
• 本番でも使えるようにファイル構成を考える（あんまイメージができない…）
• どこまでをバンドルするかの具体例

終わりに

もはやwebpackはグローバルインストールした方が良い。ガチで。 自分はまだまーだ初心者丸出しだと思うけんもっと触ってみるが、現時点で`gulpより楽だし使ってて楽しい（？）感じ。

何かオススメの使い方があれば是非是非ご教示願います！ では。