読者です 読者をやめる 読者になる 読者になる

WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

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より楽だし使ってて楽しい(?)感じ。

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