【Webpack入門】インストール方法とJavaScriptファイルのバンドル手順

今回から複数回に渡って、モジュールバンドラー「Webpack」の使い方を解説していきます。

Webpackを使うことで、複数のJavaScriptファイルを1つのファイルにまとめられるほか、SassをCSSにコンパイルしたり、VueやReactといったブラウザがそのままでは理解できないコードを、ブラウザで動作するJavaScriptに変換したりすることができます。

Web制作の現場では「あると便利」なツールという位置づけですが、モダンなフロントエンド開発においては、ほぼ必須の開発環境となっています。

これからWebpackの導入を検討しているコーダーの方は、ぜひ最後までご覧下さい。

※本記事は、Webpack 5（v5.104.1）を使用した環境を前提としています。

Webpackを使用するメリット

Webpackのメインの機能は、複数のJavaScriptファイルを1つのファイルにまとめるモジュールバンドラーとしての機能です。

Webpackのようなモジュールバンドラーが存在する前は、JavaScriptファイルを1つずつ個別に読み込む必要があり、読み込み順を間違えると、エラーが発生するといった問題がありました。

また、ファイル数が増えることでHTTPリクエスト数も増加し、ページ表示速度が低下しやすいという課題がありました。

Webpackでは、ビルド時にJavaScriptファイルの依存関係を解析し、複数のファイルを1つ（または必要に応じて複数）にまとめて出力することで、これらの課題を解決してくれます。

Webpackを使用する上で必要な環境

Webpackは、Node.js上で動作します。

そのため、Webpackを利用するには、あらかじめNode.jsをインストールしておく必要があります。

Node.jsをインストールすると、パッケージ管理ツールであるnpmも同時に利用できるようになり、コマンドラインを使ってWebpackや各種プラグインのインストール・管理が可能になります。

Node.js・npmの基本や、インストール方法については以下の記事で詳しく解説していますので、インストールがまだの方はこちらをご覧下さい。

（関連記事）npmとは？Voltaを使ってNode.jsとnpmをインストールする方法

Webpackのインストール方法

Node.js・npmのインストールが完了したら、Webpackをインストールする方法を解説します。

今回は、Webpack解説用に「webpack-test」というプロジェクトフォルダを用意しました。

このフォルダにWebpackをインストールし、基本的な設定を行っていきます。

Webpackをインストールするには、コマンドラインを起動します。

今回は、Visual Studio Codeからターミナルを開いてWebpackをインストールしてみます。

プロジェクトフォルダをVisual Studio Codeにドラッグ&ドロップします。

「ターミナル＞新しいターミナル」をクリックします。

すると、カレントディレクトリが「webpack-test」になった状態でターミナルが起動します。

ここで、まずはnpmプロジェクトの初期化を行いたいので、以下のコマンドを実行します。

npm init -y

そうすると、npmプロジェクトが初期化されて、package.jsonファイルが生成されました。

なお、package.jsonファイルにtypeが指定されている場合は、削除しておきましょう。

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs", // 削除
  "devDependencies": {
    "webpack": "^5.104.1",
    "webpack-cli": "^6.0.1"
  }
}

続いて、Webpackの本体をインストールします。

Webpackは以下のコマンドで、インストールできます。

npm install -D webpack webpack-cli

上のコマンドでは、「webpack」と「webpack-cli」の2つのパッケージをインストールしていますが、前者はモジュールバンドラー本体で、後者はWebpackをコマンドラインから操作するためのツールです。

Webpackを使用する際は、この2つのパッケージをセットでインストールする必要があります。

インストールができると、package.jsonファイルの「devDependencies」に「webpack」「webpack-cli」の2つのパッケージが追加されていることが確認できます。

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.104.1",
    "webpack-cli": "^6.0.1"
  }
}

JSファイルをバンドルする方法

続いて、Webpackで複数のJSファイルをバンドルする（1つにまとめる）方法を解説します。

Webのフロントエンド開発では、コードの可読性や保守性の観点から、機能ごとにJavaScriptファイルを分けて管理するのが一般的です。

このように、機能単位で分割されたJavaScriptファイルのことを「モジュール」と呼びます。

モジュールは、本来それぞれが独立したファイルとして存在しますが、ブラウザでそのまま読み込む場合は、モジュールの数だけHTTPリクエストが発生してしまいます。

そこでWebpackを使用することで、開発時はJavaScriptファイルを分割したまま管理しつつ、本番では1つのファイルにまとめる構成を取ります。

なお、JavaScriptをモジュールとして記述する方法はいくつかありますが、現在では標準仕様であるES Modules形式を使用するのが一般的です。

まずは、srcフォルダにindex.jsとsub.jsを用意しました。

そのうちsub.jsに処理を記述し、index.jsからそのファイルを読み込むようにします。

ESモジュールでは、import / export構文によってJavaScriptモジュールを読み込むことができます。

import { sayHello } from "./sub";

sayHello("Webpack");

export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

上記の例では、index.jsがエントリーポイントとなり、import文によってsub.jsに定義された処理を読み込んで実行していますが、Webpackでは、このエントリーポイントを起点として、読み込まれているモジュールをたどりながら、複数のJavaScriptファイルを1つにまとめます。

次に、Webpackの設定ファイルを作成し、エントリーポイントやバンドル後の出力先を設定していきます。

Webpackの設定ファイルは、「webpack.config.js」という名前で作成します。

以下は、エントリーポイントと出力先を指定した、最小限の設定例です。

const path = require("node:path"); 

module.exports = {
  entry: "./src/index.js", 
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};

それぞれの記述の意味は以下の通り。

const path = require("node:path"); // Node.jsに標準で用意されているpathモジュールの読み込み

module.exports = {
  entry: "./src/index.js", // エントリーポイントの指定
  output: {
    // 出力先ディレクトリを絶対パスで指定
    // __dirnameは、このwebpack.config.jsが置かれているディレクトリ
    // path.resolveを使うことで、webpack.config.jsがあるディレクトリ配下のdistを出力先として指定
    path: path.resolve(__dirname, "dist"),
    filename: "main.js", // 出力時のファイル名の指定
  },
};

ここまで設定が完了したら、最後にWebpackのコマンドを実行します。

npx webpack

これで「dist」フォルダが作成され、その中にindex.jsとsub.jsがまとめられたmain.jsが生成されます。

なお、ターミナル上に「WARNING」が出ていますが、これはmodeオプションをセットしていないためです。

Webpackでは、modeオプションによってビルドの挙動（開発中のコードを、本番用に使いやすく整えるための処理のしかた）が切り替わります。

modeを指定していない場合、Webpackは自動的にproductionモード（本番環境向け）で動作し、ファイルサイズを小さくするためにコードが圧縮・最適化された状態で出力されます。

一方、developmentモードを指定すると、コードの圧縮は行われず、ブラウザ上でソースマップを確認しながらデバッグしやすい形で出力されます。

const path = require("node:path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};

基本的には、開発時にはdevelopmentを指定し、ウェブサイトを公開する際にはproductionに設定します。

npx webpack --watch

依存関係のないJSファイルをまとめてバンドルする方法

上の例では、index.jsとsub.jsには依存関係がある場合のバンドル方法を解説しました。

しかし、以下のようにindex.jsとsub.jsに依存関係がない場合、エントリーポイントに指定したJavaScriptファイルのみがバンドル対象となり、2つのファイルを1つにまとめることはできません。

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

sayHello("Webpack");

function sayHey(name) {
  console.log(`Hey, ${name}!`);
}

sayHey("Webpack");

依存関係のないJavaScriptファイルをまとめてバンドルしたい場合は、entryに配列形式でまとめたいJavaScriptファイルを指定します。

const path = require("node:path");

module.exports = {
  mode: "production",
  entry: ["./src/index.js", "./src/sub.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
};

entryに配列を指定すると、それぞれのファイル間に依存関係がなくても、まとめて1つのバンドルファイルとして出力されます。

複数のエントリーポイントを使って、複数のJavaScriptファイルを出力する方法

MPAサイト（ページごとにサーバーから新しいHTMLを取得する形式のサイト）では、ホームページではhome.js、アバウトページではabout.jsのように、ページごとに読み込むJavaScriptファイルを分けたい場合があります。

その場合は、ページごとにエントリーポイントを分けることで、ビルド時に複数のバンドルファイルを出力することができます。

複数のエントリーポイントから複数の出力ファイルを生成するには、entryにオブジェクト形式でエントリーポイントを指定します。

const path = require("node:path");

module.exports = {
  mode: "production",
  entry: { home: "./src/home.js", about: "./src/about.js" },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
};

outputのファイル名を[name].jsと指定すると、オブジェクトのキーが出力されるバンドルファイル名となります。

まとめ

今回はWebpackの入門として、Webpackの概要やインストール方法、JavaScriptファイルをバンドルする方法など、基本的な使い方を解説しました。

本記事では、Webpackを使ってJavaScriptファイルのバンドルのみを行いましたが、WebpackではCSSや画像もJavaScriptファイルにバンドルすることができます。

そこで次回は、Webpackを使ってSassをコンパイルする方法や、コンパイルされたCSSをJavaScriptファイルにバンドルしたり、ベンダープレフィックスを付与したりする方法など、広くCSSを扱う方法について解説します。

今回は以上になります。最後までご覧頂き、ありがとうございました。