【JavaScriptの応用】モジュールバンドラー -webpack

Webサイトを本番環境に公開する際には、ページの表示スピードを速くするように、複数のコードをまとめたりファイルサイズの最適化をする必要があります。
この流れを一から手作業で行うには手間がかかりますが、ビルドツールを利用することでコマンド1つで複数の作業を自動で行えるようになります。

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

webpack

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

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

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

>>webpack

webpackを使用するには、node.jsが必要です。node.jsのインストール方法は、こちらの記事を参考にしてください。

2021.10.07

2022.05.26

【JavaScriptの応用】サーバーサイドで使用できる「node.js」とは？インストール手順も解説

JavaScriptと言えば、Web制作やWebアプリに利用されるスクリプト言語のことで、表示部分を制御するクライアント言語と呼ばれています。最近では、JavaScriptがサーバー言語としても利用されているのです。そこで今回は、サーバーサイドで利用できるJavaScriptの中でも、初心者...

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は奥が深いため、まずは基本的なビルド方法を理解し、使い慣れていくことをおすすめします。