JavaScriptにおけるモジュールとWebpack

JavaScriptにおける「モジュール」の定義

モジュール(module)とは「変数や関数をまとめたもの」で, JavaScriptにおいては1つのモジュールは1つのjsファイルに対応します.

一つの大きなjsファイルにあらゆる機能を書くのではなく, モジュール化を行なって小規模なjsファイルの組み合わせとして表現することにより, コードの可読性が増したり変数や関数名の衝突を防ぐことができたりなどの様々な恩恵が受けられます.

importとrequireの違い

importとrequireはどちらもモジュールの読み込み方法を表しています.
importはブラウザ上で動作するES6のモジュールシステムであり, requireはNode.jsの環境で動作するCommonJSのモジュールシステムという違いがあります.

importについて

モジュール側では関数やクラスを定義する際に先頭にexportを付けることで, 他のファイルから取り込めるようになります.

module.js

export const hello = () => {
    console.log('hello');
}

下記のようにimportとそのファイルへのパスを指定することでモジュールが取り込まれ, モジュールで定義された関数やクラスを扱うことができます.

main.js

import { hello } from './module';

hello();

requireについて

先頭にmodule.exportsを付けることで, 他のファイルから取り込めるようになります.

module.js

module.exports = () => {
    console.log('hello');
}

ある変数を定義しそこでrequireを用いることで, モジュールで定義された関数やクラスを用いることができます.

main.js

const hello = require('./module');
hello();

Webpackが行なっていること

Webpackは「モジュールバンドラ」の一種です.
ここで言うバンドル(bundle)とは, 複数のモジュールを一つのファイルにまとめあげることを意味します.
一つのファイルにまとめあげることは, リクエストの回数を減少させることができ表示時間の短縮やトラフィックの軽減などのメリットがあります.

WebpackはES6でもCommonJSでも動作するモジュールバンドラであり, 下の例のようまとめたい複数のモジュール(module1.js, module2.js)　をインポートすることで, エントリポイントとなるファイル(main.js)を生成してくれます.
HTMLではscriptタグでこのバンドルされたファイルを読み込むことになります.

module1.js

export const hello = () => {
    console.log('hello');
}

module2.js

export const bye = () => {
    console.log('bye');
}

main.js

import { hello } from './module1';
import { bye } from './module2';

hello();
bye();

create-react-appで作成されたアプリはWebpackをベースとしたビルドシステムを使用していたり, Next.jsの内部でWebpackが用いられていたりと, 広い領域でWebpackは用いられています.

おわりに

今回はWeb開発においてちらほら見かけるWebpackとはなんぞや？と言うことで, その概要について調べました.
実際にシステムを作りパフォーマンスチューニングを行う際などに, この知識が少しでも役立てば良いなと思いました.

参考文献

• chatGPT
• jsのimportとrequireの違い
• webpackとは？