webpack の使い方

近年の Web 開発では、サーバーサイド（PHP など）ではなく、クライアントサイド（JavaScript）で処理することが多くなりました。 JavaScript の重要性が増えるに伴って、JavaScript ファイルは巨大化し、複雑になり、メンテナンスが難しくなってきます。 JavaScript はもともと大きなプログラムを記述するのにはあまり向いていない言語です。 巨大で複雑な JavaScript ファイルをメンテナンスできるようにするにはどうすればよいでしょうか？ 効果的なアプローチは、複数の小さなファイルに分割していくことです。

昔の JavaScript では、ファイルを分割するには、HTML の script タグを複数記述するという方法ぐらいしかありませんでした。 しかし近年では、JavaScript を複数のファイルに分割できる "モジュール" という仕組みが導入されました。 そのモジュールという仕組みを使ってファイルを分割していくことで、必要なファイルを必要な時に読み込んで使用することが可能になります。

しかし良いことばかりではありません。 モジュール化した JavaScript ファイルを Web ブラウザで使用するにはいくつか問題が発生します。 1つ目は規格の問題です。 モジュールという仕組みが完全に規格統一されていなかったため、 複数の規格が存在してしまっており、その規格毎に JavaScript の記述方法が異なったりしています。 2つ目は通信の問題です。 複数のファイルに分割されてしまうということは、そのファイル毎に通信が必要になるということを意味します。 その通信処理がボトルネックになってしまうのです。

こういった状況から、モジュールに分割した JavaScript ファイルを、再度1つのファイルに結合する必要性が生じました。 1つのファイルにまとまっていれば、モジュールの規格がなんであれ関係が無くなりますし、通信も1度で済みます。

その分割したモジュールを1つにまとめる（バンドルする）処理を行ってくれるのが webpack です。 webpack は、モダンな JavaScript アプリケーション用の静的モジュールバンドラーです。

では実際に、そのモジュールとはどういった感じなのかというのを簡単に説明しておきます。

モジュールには大きく分けて CommonJS と ES Modules の2種類の規格があります。 この2つはモジュールの記述方法が異なります。 module.exports / require を使用するのが CommonJS で、 export / import を使用するのが ES Modules です。 webpack はどちらの形式でも扱うことができますが、この2つは区別できるようにしておきましょう。

JavaScript 関係のツールでは、Node.js が CommonJS を前提としていることもあり、まだまだ CommonJS を見かけます。 webpack のデフォルトの設定ファイルも CommonJS です。 しかしながら、今後は ES Modules の方が主流になっていくと思われます。 新しく作成する場合は、ES Modules の方を使用した方が良いです。

function sum(a, b) {
	return a + b;
}
module.exports = sum;

export function sum(a, b) {
	return a + b;
}

const sum = require('./sum.js');

console.log(sum(1, 2));

import { sum } from './sum.js';

console.log(sum(1, 2));

では、さっそくですがインストールしていきましょう。

npm install --save-dev webpack webpack-cli

webpack --version

webpack --help

インストールできたので、さっそく使ってみます。

webpack

webpack --watch

webpack のデフォルトの設定ファイルは "webpack.config.js" で、フォーマットは JavaScript（CommonJS）になります。 他にも JavaScript（ES Modules）、JSON などを使用できます。 また、追加で設定が必要にはなるのですが、TypeScript、CoffeeScript などの様々なフォーマットを使用することができます。

webpack

webpack --config config.json

module.exports = {
	mode: 'production',
	entry: {
		main: './src/index.js'
	},
	output: {
		path: __dirname + '/dist',
		filename: '[name].js'
	}
};

webpack で複数のファイルを1つのファイルにバンドルしてしまうと、 JavaScript を実行した際に発生したエラーなどが、どのファイルの、どの行で発生したのかを探すのが難しくなります。 何故なら、動作させる JavaScript ファイルはバンドル後のファイルであって、修正しないといけないのはバンドル前のファイルだからです。 JavaScript ファイルを圧縮（minify）した場合は、さらに難しくなります。

そこで登場するのがソースマップファイルです。 ソースマップファイルがあると、Web ブラウザは、バンドル後のファイルと、バンドル前のファイルを結び付けることができるようになります。 それにより、エラーなどが発生した際に、バンドル前のファイルでの発生場所を表示してくれるようになります。 開発時にデバッグしたりするのが容易になりますのでオススメです。 ソースマップファイルの拡張子は ".map" です。

webpack --devtool source-map

module.exports = {
	mode: 'production',
	devtool: 'source-map'
};

webpack コマンドですが、各種オプションなどを毎回入力するのは面倒に感じてくると思います。 そこで、よく使う webpack コマンドを npm-scripts に登録しておくと、入力の手間が少なくなって便利です。

npm-scripts では、"./node_modules/.bin" に PATH が通っているので、"./node_modules/.bin" を入力したり、npx コマンドを使用したりする必要はありません。 npm-scripts の使い方がわからないという方は、「Node.js と npm の使い方（その３：npm-scripts）」を参考にしてください。

{
	"name": "demo-app",
	"version": "1.0.0",
	"scripts": {
		"build": "webpack"
	},
	"devDependencies": {
		"webpack": "^5.75.0",
		"webpack-cli": "^5.0.1"
	}
}

npm run build

npm run build -- --watch

• webpack
• Getting Started | webpack
• Configuration | webpack
• Configuration Languages | webpack
• Entry and Context | webpack
• Devtool | webpack
• JavaScript モジュール - JavaScript | MDN