webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。

この連載ではBabelやTypeScriptなどのECMAScript 2015+の環境構築、ReactやVue.jsやThree.js、jQueryなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。

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

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

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

連載で解説していること

ECMAScript 2015(ES2015)以上のJavaScriptで開発するのがイマドキのフロントエンドエンジニアの常識だと思います。ES2015+とwebpackの連携するための記事も用意しています。あわせてご覧ください。

webpackの概要

webpackとはウェブコンテンツを構成するファイルをまとめてしまうツールです。一番多い使い方は、複数のJavaScriptを一つにまとめることでしょう。複数のJavaScriptをまとめるのは、いろんな利点があります。

まず、HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、複数のファイルの転送に時間がかかります。複数のJSファイルを一つにまとめてしまうことが一般的な解決案として知られています。

160519_webpack_is

複数のJSファイルを一つにまとめるだけなら他のツールでも代用ができますが、webpackの場合は標準仕様のES Modulesが使えたり、node_modulesのモジュールを結合できるといったメリットがあります。このあたりが、イマドキのフロントエンドエンジニアのツールと言われる所以です

それだけでも便利なのですが、webpackはJavaScriptだけでなくスタイルシートや画像までもバンドルできてしまうのです(興味ある方は記事「webpackでスタイルシート(CSSやSass)を取り込む方法 – Qiita」を参照ください)。さらにJSファイルの圧縮やソースマップに対応していたり、ローカルサーバーの起動まで包括的な制作環境としての機能まであります。

webpackを導入しておけばフロントエンドエンジニアに必要な技術が一通り揃う、ということが最大の利点でしょう。

導入手順

webpackを使う準備をしましょう。事前にNode.jsをインストールし、コマンドラインを使う準備をしておいてください。

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

解説の手順は動画に記録しておきました。記事を読み進めてわからない手順があれば、動画を見返してください。

コマンドラインでの操作

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

 ▼ Windowsでの移動

cd C:¥Users¥MyName¥myproject

 ▼ macOSでの移動

cd /Users/MyName/myproject

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

npm init -y

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

npm i -D webpack

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

package.jsonファイル

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

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

以上で、webpackを使用できる準備が整いました。ここからはwebpackを使いながらその特徴を理解していきましょう。次のページではJavaScriptのモジュールバンドルの方法を解説します。