webpack の使い方

最近の Web の開発では、webpack を使用することはもはや当たり前のような状況です。 そこで改めてその使用方法をまとめてみたいと思います。 今更かもしれませんが、誰かの参考になれば幸いです。

webpack とは?

webpack_thumb.png

近年の 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 の方を使用した方が良いです。

CommonJS
(拡張子は ".js" もしくは ".cjs")
ES Modules
(拡張子は ".js" もしくは ".mjs")
読み込まれる側(sum.js)
function sum(a, b) {
	return a + b;
}
module.exports = sum;
読み込まれる側(sum.js)
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 でインストールする

npm を使ってインストールするには、下記のコマンドを実行するだけです。 webpack 本体である "webpack" パッケージと、コマンドラインから使用できるようにするための "webpack-cli" パッケージの2つを同時にインストールします。 "webpack-cli" パッケージが無いとコマンドラインで使用できないので注意してください。

基本的には開発環境で使うツールだと思いますので、--save-dev オプションを付けておきましょう。 npm の使い方がわからないという方は、まずは「Node.js と npm の使い方(その1:概要)」を参考にしてください。

npm install --save-dev webpack webpack-cli

インストールできたか確認する

"webpack-cli" パッケージをインストールすると、webpack コマンドが使えるようになっています。 下記のコマンドを実行してバージョン番号が表示されれば、ちゃんとインストールできています。

webpack --version

ヘルプを表示する

webpack コマンドの詳しい使い方が知りたい場合は、ヘルプを表示してみましょう。

webpack --help

基本的な使い方

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

設定ファイルの内容に従って実行する

webpack コマンドをオプション無しで実行すると、設定ファイルの内容に従って処理が実行されます。

webpack のコマンドラインで細かな設定を行うのはかなり大変です。 なので、基本的には設定ファイルに設定を記述することになると思います。

とはいえ、設定ファイルは必須ではありません。 設定ファイルが無い場合は、変換元は "./src/index.js"、出力先は "./dist/main.js" として実行されます。

設定ファイルの詳しい説明については後述します。

webpack

ファイルの変更を監視し、自動的に実行する

ファイルを変更するたびに実行する必要があるわけですが、毎回毎回ファイルを変更するたびに実行するのはとても面倒です。 そこで、ファイルの変更を webpack が監視し、ファイルに変更があった場合に自動で実行してくれるようになるオプション --watch があります。 このオプションを付けて webpack を実行すると、そのファイルに何か変更があった場合、自動で実行されるようになります。 監視をやめる場合は、Ctrl + C を押せば終了できます。

webpack --watch

設定ファイル

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

設定ファイルを使用する

設定ファイルを使用する方法は2つあります。

デフォルトの設定ファイルを使用する

1つ目の方法は webpack のデフォルトの設定ファイルを使用する方法です。 オプションを指定する必要はありません。 webpack は、デフォルトで現在のディレクトリから設定ファイルを探して使用します。

webpack

--config オプションで指定する

2つ目の方法は、--config オプションで使用したい設定ファイルを指定することです。 複数の設定ファイルを使用して、設定を切り替えたい場合などには便利かもしれません。 --config オプション には、エイリアス(別名) -c オプションがあります。

例:設定ファイルとして「config.json」を指定する場合
webpack --config config.json

設定ファイルの設定項目

では、実際にどう設定すれば良いかを、簡単な例を使用して説明します。

下記の例を見てください。 この例は、"./src/index.js" ファイルを変換し、"./dist/main.js" ファイルに、圧縮(minify)して出力するという設定になります。

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

mode

mode 項目は、webpack の動作モードを指定します。

production は本番環境向けの設定で、変換後の JavaScript が圧縮(minify)されます。 development は開発環境向けの設定で、変換後の JavaScript が圧縮(minify)されません。

webpack コマンドで --mode オプションを使用して指定することもできます。

entry

entry 項目は、エントリーポイントの一覧を指定します。

エントリーポイントというのは、どのファイルをどう変換するのかという設定です。 複数記述することができます。

キーに名前を指定します。 これは後述の output 項目で、出力先のファイル名として使用されます。

値に変換するファイル名を指定します。このファイルが変換されます。

output

output 項目は、結果の出力先を指定します。

path は、出力先のディレクトリです。 値の __dirname は、現在のディレクトリのパスを表しています。

filename は、出力先のファイル名です。 値の [name] の部分には、エントリーポイントの名前が入ります。 上記の例で言えば、entry で指定した際のキー "main" が入ります。 拡張子 ".js" が付いているので、最終的な変換結果は、"./dist/main.js" ファイルに出力されることになります。

ソースマップファイル

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

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

ソースマップファイルを出力する

ソースマップファイルの出力を有効にする方法は2つあります。

--devtool オプションで指定する

1つ目の方法は、webpack コマンドで --devtool オプションを指定する方法です。 値として source-map を指定します。 --devtool オプション には、エイリアス(別名) -d オプションがあります。

webpack --devtool source-map

設定ファイルで指定する

2つ目の方法は、設定ファイルで devtool 項目を指定する方法です。 値として source-map を指定します。

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

npm-scripts に登録する

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

npm-scripts の使い方がわからないという方は、「Node.js と npm の使い方(その3:npm-scripts)」を参考にしてください。

npm-scripts に登録

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

npm-scripts を実行する

npm run build

オプションを追加したい場合は、-- で繋ぐと追加できます。

npm run build -- --watch

参考サイト

関連記事

JavaScript は文法的にかなりフレキシブルな言語であり、コードが汚くなりがちです。キレイで読みやすいコードを保つために、JavaScript にも静的解析ツールを導入しましょう。ESLint とは?ESLint は、JavaScript の静的解析ツールです。JavaScript コードを実行する前に(つまり静 ...
近年の Web 開発では、サーバーサイド(PHP など)ではなく、クライアントサイド(JavaScript)で処理することが多くなりました。JavaScript の重要性が増えるに伴って、そのテストもまた重要になってきます。Jest とは?Jest は、Meta 社(旧:Facebook 社)製の JavaScript ...
最近の Web 界隈では、UX を高めるために、UI を JavaScript でガリガリ実装するというのが普通になってます。フロントエンドエンジニアなんていう職種が生まれるほど、この界隈は活発です。そこでフロントエンド開発でほぼ必須となるであろう Node.js と npm について少しまとめてみます。今更感がすごい ...

記事検索

最新記事

人気記事

RSSフィード

お知らせ

  • 2023/01/30 NEW
    ブログ記事「Windows の Docker 環境を高速化する方法」を追加しました。
  • 2023/01/06
    ブログ記事「Jest の使い方」を追加しました。
  • 2023/01/05
    ブログ記事「ESLint の使い方」を追加しました。
  • 2023/01/04
    ブログ記事「webpack の使い方」を追加しました。
  • 2022/12/13
    ツールに「特殊文字変換ツール」を追加しました。
    通常文字と特殊文字の相互変換を行います。対応している文字は英字と数字のみです。
    特殊文字を使用すると、検索エンジンなどで検索しづらくなる可能性があるのでご注意ください。