Re:ゼロから始めるwebpack生活

このエントリーは、エキサイト Advent Calendar 2016 の12/12の記事です。

こんにちは、エキサイトの中村です。
この記事のモチベーションの半分はタイトルが言いたかったという説もありますが、
今回はwebpackについて備忘録的な意味も込めて書きたいと思います。

f0364156_19330833.png
https://webpack.github.io/ より

webpackとは

webpackとはWebのフロントエンド開発の際に使えるツールです。
javascriptのファイル分割(モジュール化)を行うための仕組み(CommonJS、AMDのスタイル)の提供や、
(babelによる)ES2015からES5のjsへのトランスコンパイル、jsのminify、sassからcssへのコンパイル、画像のdata属性へのインライン化などを行うことができる
jsのモジュール読み込みとビルドツール等を合わせたような多機能ツールです。

さらにwebpackではプラグインの組み合わせによって、上記のような機能が提供されているため
プラグインを追加することによって他にもいろいろな機能を追加することができます。

インストール、基本的な機能などについては、下記の公式ドキュメントやQiitaで公開されている方々の記事がいろいろあるので、ここでは割愛します(笑)
(前提としてnvmなどでnode.jsを導入する必要があります。)
公式ドキュメント
公式チュートリアル
(以前は?)公式ドキュメントからもリンクがある紹介のブログ。英語ですがwebpackで何ができるかの流れがひと通り紹介されていてわかりやすいです。

webpack.config.jsの紹介

上記のようにwebpackはとても多機能なツールのため、全ての機能を使いこなすのは大変だと思います。
なので、まずは使えそうな機能から使ってみるのが良いと思います。

さて、この手のツールで実際に使ってみたいなと思ってもまず設定ファイルなどを準備するのが大変ですよね。
そこで実際にプロダクト環境で使用している設定ファイル等を一部抜粋して紹介しようと思います。


ディレクトリ構成サンプル
. # プロジェクトルートのディレクトリとします
├── assets # webpackでビルドするためのファイルを入れるディレクトリ
├── htdocs # webに公開されるドキュメントルート
│   ├── assets # webpackにてビルドされたファイルが置かれるディレクトリ
├── node_modules
├── .eslintrc.js
├── package.json
├── webpack.config.js
└── webpack.sh

webpackの設定を記述しているconfig.jsです。(長くなるのでgistに上げておきました)
デプロイ環境ごとに変更したい値を差し替えるための設定
envinfo.js
必要なパッケージ

設定内容そのものは、上記にあるようなドキュメントや他の記事の設定を集めたようなものになっていますが、
ポイントとしてはビルド時の環境変数を参照して開発環境と本番環境で、js,sassの圧縮の有無やパブリッシュ先のCDNの切替えなどを行っています。
(実際の環境ではもう少し細かく分かれていますが、例として単純化してあります。)


webpackコマンドの主な使い方

上記のサンプルのようなディレクトリ構造でnpmでwebpackをインストールすると、実行コマンドが
node_modules/.bin/webpack
にインストールされると思います。

このままだとコマンドを打つときにパスが長いので下記のようなシェルスクリプトでラップして使っています。
webpack.sh
#!/bin/bash
./node_modules/.bin/webpack $@

開発時には-wオプションを付けて実行することで、配下の対象ファイルで変更があるとそれを検知して自動でコンパイルしてくれます。

./webpack.sh -w
コンパイルした結果のファイルは、上記のサンプルでは htdocs/assets/ 以下の○○.jsに出力されるので
html側ではこちらのパスを読み込むようにscriptタグを書いておく必要があります。


本番環境など用にビルドする際にはデプロイスクリプトの中で
export BUILD_ENV=live; ./webpack.sh -j > buiid.json
というようなコマンドを実行し、環境変数経由でビルドのターゲットを指定しています。

また-jオプションを利用することでビルド結果をjsonファイルとして出力することができます。
このjsonファイルをデプロイスクリプトの中で読み込むことで、ビルド後のjsやcssのハッシュ付のファイル名を取得することができるので
デプロイスクリプトにより、読み込みファイル名の置換などを行っています。

所感

webpackを導入した動機としては
  • フロントエンドjavascriptフレームワーク導入のため
  • es2015が利用したい
  • js,sassのminifyを行いたい&更新時のブラウザキャッシュ対策のためファイル名のハッシュ化を行いたい
などの理由で使用してみましたが、ひと通り当初の目的は実現できたので導入した甲斐がありました。

ただ、まだ利用していない機能や新しいプラグインがたくさん出てきており奥が深いです。

最近javascriptをよく書くようになったのですが、jsはクライアントサイドもサーバーサイドも進歩が激しくて楽しいですね018.gif


それでは、明日のエキサイト Advent Calender 2016もお楽しみに。

エンジニア募集

エキサイトではエンジニアとして一緒に働いてくださる方を新卒採用と中途採用で募集しています。詳しくは、こちらの採用情報ページをご覧ください。

by ex-engineer | 2016-12-12 13:00