dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

ビルドツール webpack 触ってみた

webpack npm JavaScript

f:id:kokushin:20160426105414p:plain

そろそろ「webpack」触ってみようと思い、チュートリアルを見ながら試してみました。
たくさんのモジュール群を最後にキュッとビルドするときの快感がやばいっすね。

webpack とは

ざっくり説明すると、「開発時はJSファイル等を分割して管理しておいて、リリースする際に“良い感じ”にまとめて結合させちゃうツール」です。たぶん。

ビルドツールと呼ばれているものですね。
「gulp」などのタスクランナーと組み合わせて、最後のリリース段階で使うことが多いみたいですが、もちろん単体でも動作します。
基本的なことを知るために今回は「webpack」単体で動かしてみます。

参考チュートリアル

qiita.com

すっごく分かりやすいので、手順はこちらを見てください。
この記事では実行ログと初心者俺氏がつまづいた点だけまとめております。

では早速実行ログを見て行きましょう。

webpack をグローバルインストール

$ sudo npm install webpack -g

webpackコマンドを叩けるようにグローバルインストールしておきます。

プロジェクトディレクトリを作成＆移動

$ mkdir webpack-test && cd webpacl

package.json作成

$ npm init

webpack をローカルインストール

$ npm install webpack --save-dev

以上で「webpack」の準備は完了です。

モジュール作成〜ビルドまで

では実際に「webpack」を使ってJSのモジュール化からビルドまでの一連の流れをやってみましょう。

モジュールの作成

まずは「print.js」というファイル名でモジュールを作成します。

module.exports = function(msg) {
  document.write("[print] " + msg);
};

引数で受け取った文字列を出力するだけのシンプルなコードです。
module.exportsを使用することでモジュールとして読み込めるようになります。

エントリーポイントの作成

先ほど作成したモジュールを読み込ませ、実行するためのエントリーポイントとなる「main.js」を作ります。

var print = require('./print.js');

print('Hello, World!');

gulpfile.jsと似たような感じでモジュールを読み込ませ、「Hello, World!」と出力させるようにします。

HTMLファイルの作成

実行結果を確認するためにindex.htmlを作成しましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>webpack-test</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

bundle.jsの記述をお忘れなく。
このファイルは、ビルドすることで「webpack」が自動生成してくれる「全てのJSがぎゅっと詰まったファイル」です。

ビルド！

いよいよ待ちに待ったビルドです。

$ webpack main.js bundle.js

すべてのJSを管理している「main.js」を、実行できる形として「bundle.js」へ出力します。

Hash: c1bb7e3fb4bfcd0fc602
Version: webpack 1.13.0
Time: 596ms
    Asset    Size  Chunks             Chunk Names
bundle.js  263 kB       0  [emitted]  main
   [0] ./main.js 111 bytes {0} [built]
    + 2 hidden modules

無事ビルドされたことが確認できたら、index.htmlをブラウザで開いてみましょう。

「[print]Hello, Wolrd!」

と出ていれば成功です。

このように、最初はモジュールごとにJSを管理しておき最後にぎゅっとまとめて一つのファイルとして簡単に出力することが可能です。

ビルド時にエラーが出る

ビルド時にエラーが出る場合は、ファイルのパスを「./」や「/」から書きなおしてみましょう。 おそらく正常にビルド出来ます。

設定ファイルでビルド実行を簡単に

以下の設定ファイルをつくっておくことで、「$ webpack」コマンドだけでビルドを実行することが出来ます。

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

「webpack.config.js」という名前で保存しましょう。

感想とか

JSが多くなり管理が雑になりがちなWebアプリケーション案件はもちろん、普通のウェブサイト制作でも十分に使えそうなツールですね。

個人的には、たくさんあるファイル群をひとまとめに出来る時の快感が非常に良いので（謎）、積極的に使っていきたいと思います。