webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。この記事ではBabel、TypeScript、React、Three.js、Sassの設定方法を網羅。サンプルファイルで詳しく解説します。

webpackの入門記事は他のサイトにもたくさんありますが、解説しているバージョンが古くて使えなかったりします(Google検索結果の上位の記事が古いWebpack 1.x系のものがほとんど)。解説記事通りにやったのにうまく動かない・・・なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください

※本記事では2017年7月現在最新のNode.js v8、webpack 3で解説しています。

本記事で解説していること

※webpackでBabelを使いたい方は記事「webpack 3入門 – BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き)」を参照ください。

人気が伸びるwebpack

webpackの人気は2015年頃から急激に伸びています。次に示すのはGoogleトレンドで、グラフの数値が高いほどGoogleで多く検索されていることを示します。

2015年4月~2017年4月のGoogleトレンド調査(カテゴリー:コンピュータ)

概要

ウェブコンテンツでは多くのアセットから成り立ちます。webpackとは、ウェブコンテンツを構成するファイルを「モジュール」という単位で取り扱い、最適な形に作り変える為のツールです。

webpackには次の4つの特徴があります。

  1. JavaScript「モジュール」の取り扱い
  2. JavaScript以外のアセットを「モジュール」として取り扱う
  3. アセットダウンロードの最適化
  4. 各タスクとの連携

160519_webpack_is

※ モジュール(module)とは基本単位、部品といった意味を持ちます

導入手順

webpackの特徴を紹介する前に、webpackを使う準備をしましょう。

  1. 公式サイトからNode.jsをインストールします(v8以上をインストールください)
  2. コマンドラインを起動します(macOSだとターミナル、Windowsだとコマンドプロンプト)

この記事で解説するサンプルはGitHubからダウンロードできます。

コマンドラインでの操作

コンテンツのファイル一式が保存されるフォルダー(以下、プロジェクトフォルダーと呼びます)を任意の場所に作成し、コマンドラインでその場所に移動します。cdコマンドで任意のフォルダーまで移動しましょう。

 ▼ Windowsでの移動

cd C:¥Users¥MyName¥myproject

 ▼ macOSでの移動

cd /Users/MyName/myproject

次のコマンドを実行します。これを実行すると、プロジェクトの設定情報が記述されたpackage.jsonファイルが生成されます。

npm init -y

webpackを実行する為に、webpack本体をインストールします。npm installはインストールの命令、-Dはインストール先をdevDependenciesにするための指定、webpackはその名の通りインストールする対象です。

npm install -D webpack

package.jsonファイルのscriptsには、webpackのビルドコマンドを追加します。

package.jsonファイル

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^3.0.0"
  }
}

package.jsonファイルには最低限scriptsdevDependencies指定が記述されてあれば使えます。namelicenseなどは消してしまって大丈夫です。

以上で、webpackを使用できる準備が整いました。ここからはwebpackを使いながらその特徴を理解していきましょう。

webpackはJavaScriptのモジュールを取り扱える

一つのJavaScriptファイルに長い処理を書くと、可読性が悪くなります。これを解決するには複数ファイルへ分割することでしょう。Node.jsの界隈では、機能ごとに分割された各々のJavaScriptファイルのことを一般的に「モジュール」と呼びます

160519_javascript_module

しかし、少し古いブラウザ(例:IE 11)ではJavaScriptのモジュールを取り扱うための仕組みがなかったため、モジュールを取り扱うための仕様が長いこと検討されてきました。代表的なものにCommonJS、AMD、ES2015のModules等があります。webpackにはモジュール仕様のメリットを採用しつつ、モジュールを簡潔に使用する仕組みがあります

JavaScriptモジュールの使用例

2つのモジュールを使ったJavaScript処理を例にして説明します。main.jssub.jsに定義されたhello()メソッドを呼び出す仕組みを考えてみます。

main.jsからsub.jsの処理を呼び出したいとき、ES Modulesの仕様に沿った記法としては、次のように定義できます。

▼main.js

// import 文を使って sub.js ファイルを読み込む。
import {hello} from './sub';

// sub.jsに定義されたJavaScriptを実行する。
hello();

▼sub.js

// export文を使ってhello関数を定義する。
export function hello() {
  alert('helloメソッドが実行された。');
}

JavaScriptモジュールはこのままだと古いブラウザ(例:IE 11)で使用できないため、ブラウザが解釈できる形に変換する必要があります。そこで登場するのがwebpackです。