webpack の使い方
最近の Web の開発では、webpack を使用することはもはや当たり前のような状況です。 そこで改めてその使用方法をまとめてみたいと思います。 今更かもしれませんが、誰かの参考になれば幸いです。
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 の方を使用した方が良いです。
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
コマンドが使えるようになっています。
下記のコマンドを実行してバージョン番号が表示されれば、ちゃんとインストールできています。
なお、コマンドは "./node_modules/.bin" にインストールされます。
コマンドが見つからない場合は、"./node_modules/.bin" に PATH を通しておくか、
相対パスで "./node_modules/.bin/webpack" と指定するか、
もしくは npx
コマンドを使用するなどの対応を行ってください。
この記事では、説明の簡略化のために "./node_modules/.bin" に PATH を通してあることを前提として説明していきます。
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
オプションがあります。
webpack --config config.json
設定ファイルの設定項目
では、実際にどう設定すれば良いかを、簡単な例を使用して説明します。
下記の例を見てください。 この例は、"./src/index.js" ファイルを変換し、"./dist/main.js" ファイルに、圧縮(minify)して出力するという設定になります。
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
を指定します。
module.exports = { mode: 'production', devtool: 'source-map' };
npm-scripts に登録する
webpack
コマンドですが、各種オプションなどを毎回入力するのは面倒に感じてくると思います。
そこで、よく使う webpack
コマンドを npm-scripts に登録しておくと、入力の手間が少なくなって便利です。
npm-scripts では、"./node_modules/.bin" に PATH が通っているので、"./node_modules/.bin" を入力したり、npx
コマンドを使用したりする必要はありません。
npm-scripts の使い方がわからないという方は、「Node.js と npm の使い方(その3:npm-scripts)」を参考にしてください。
npm-scripts に登録
{ "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