Webサイトを本番環境に公開する際には、ページの表示スピードを速くするように、複数のコードをまとめたり、ファイルサイズの最適化をする必要があります。

この流れを一から手作業で行うには手間がかかりますが、ビルドツールを利用することで、コマンド1つで複数の作業を自動で行えるようになります。

そこで今回は、JavaScriptのビルドツールであるwebpackについて解説していきます。インストールからビルドするまでの流れを見ていきましょう。

webpack

「webpack」とは、JavaScriptと依存関係のあるモジュールを適切な形にまとめながら、ビルドを行うために使われるツールです。モジュールを束ねる役割があることから、「モジュールバンドラー」と呼ばれることもあります。

通常のプログラムでは、1つのJSファイルにすべてのコードを記述するわけではなく、役割ごとにファイルを分割し、必要な箇所でそれらのファイルを読み込む形が一般的です。その機能ごとに分割されたファイルのことをモジュールと呼びます。

webpackを利用することで、JavaScriptやCSS、画像をまとめるなど、モジュールを一まとめにしてくれるため、通信時間や通信回数を抑えることが可能です。その他にも、ES6のコードをES5に変換、SassファイルをCSSに変換することもできます。

webpack

webpackを使用するには、node.jsが必要です。node.jsのインストール方法はこちらの解説をご覧ください。

webpackのインストール

まずは、webpackをインストールしてみましょう。
「webpack-test」というディレクトリを作成し、その中へ移動します。

$ mkdir webpack-test
$ cd webpack-test

移動ができたら、以下のコマンドでwebpackをインストールします。

$ yarn add webpack webpack-cli --dev
...
✨ Done in 10.71s.

以上でインストールが完了です。

webpackの使い方

ここからは、実際にwebpackを使ってみましょう。

ボタンをクリックすると、ランダムな数字が呼び出されるかんたんな実装とビルドまでを行います。
後ほどlodashというライブラリを読み込んで使用するため、先にlodashもインストールしておきます。

$ yarn add lodash
...
✨ Done in 1.89s.

ファイルの追加

webpack-testディレクトリ直下に、「src」というディレクトリと、「index.html」というファイルを作成します。
また、srcの中に「index.js」というファイルを追加します。

$ touch index.html
$ mkdir src
$ touch src/index.js
$ ls
index.html node_modules package.json src yarn.lock

index.htmlの編集

Index.htmlファイルを開いて以下を記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="number"></div>
  <button id="button">Show random numbers</button>
  <script src="./dist/bundle.js"></script>
</body>
</html>

index.jsの編集

つぎに、index.jsファイルにも記述を加えましょう。

先ほどインストールしたlodashを、コードの一番上で読み込みます。
lodashは、JavaScriptのユーティリティライブラリと呼ばれていて、配列やオブジェクトの操作、文字列の判定などに利用できる便利な関数が用意されています。

インストールしたパッケージを読み込むには、「import 任意の名称 from ‘ライブラリ名’」とするとインポートが可能です。
lodashの場合は、「_」という名称を使用します。

import _ from 'lodash'; // lodashのインポート

//0から10までの数字をランダムで表示する
function randomNum() {
  const mainEl = document.getElementById('number');
  let p = document.createElement('p');
  p.innerHTML = _.random(0, 10).toString();
  document.body.appendChild(p);
}

{
  const button1 = document.getElementById('button');
  button1.addEventListener("click", randomNum);
}

「_random(0, 10)」は、lodashの関数です。
この記述によって、0から10までのランダムな整数値を得ることができます。

webpack.config.jsの作成

続いて、webpackの設定を行うためのファイルの作成です。

ビルドを行うには、ソースコードの場所や、ビルド時に生成される実行ファイルなどの情報を記述する必要があります。
webpack.config.jsファイルでは、ファイルの出力先やエントリーポイント、プラグインなどの設定を行うことができます。

$ touch webpack.config.js

webpack.config.jsファイルを開いたら、以下のように記述します。

// ファイルやディレクトリを操作するためのユーティリティパッケージpathを利用
const path = require('path');

module.exports = {
  mode: 'development', //モードの設定。ここでは開発モードに指定
  entry: './src/index.js', //入力先ファイルパスの指定
  output: { //出力先の指定
    filename: './bundle.js', //出力ファイルの指定
    path: path.resolve(__dirname, 'dist') //出力先フォルダパスの指定。distというディレクトリを基準パスとする
  }
};

webpackでビルドを実行

準備が整ったので、以下のコマンドでビルドを行ってみましょう。

$ yarn run webpack

ビルドが成功すると、プロジェクト直下にdistというディレクトリが生成されます。
その中のbundle.jsというファイルには、トランスパイルされたファイルのコードが確認できるはずです。

ブラウザの確認

ビルドが完了したら、ブラウザで動作確認を行いましょう。
Index.htmlファイルを開いて、ボタンをクリックしてみてください。

何度かボタンをクリックすると、ランダムな数字が表示されることが確認できます。

まとめ

今回は、webpackを使ってモジュールをまとめ、ビルドする方法について解説しました。

上記で紹介した以外にも、webpack-dev-serverをインストールすると、ファイルに変更が加わるたびに自動で再ビルドできるようになったりと、webpack1つでさまざまな役割を果たします。

その分webpackは奥が深いため、まずは基本的なビルド方法を理解し、使い慣れていくことをおすすめします。
ぜひ参考にしてwebpackに触れてみてください。

JavaScript関連記事