Webpackとは何？メリットや導入方法・使い方を解説！

Webpack、Parcel、Rollupなど、モジュールバンドラーと呼ばれるものには様々なものがあります。

Webアプリケーションの構築時などに利用されるものですが、その中でも高機能で軽く、利用者も右肩上がりに増えているモジュールバンドラーがWebpackです。

そもそもモジュールバンドラーとはどういうものなのかよく分からない、という人もいるかと思います。Webpackの説明の前に、モジュールバンドラーとはどういったものなのかを説明しておきます。

モジュールバンドラーとは、複数のモジュールを1つにまとめることができるツールを指します。使い方によってはまとめたファイルが複数になることもありますが、ざっくり説明するとそういったものです。

モジュールというのは機能ごとに分割/保存されたファイルで、プログラムの中のJavaScriptファイルやsassファイルのことをいいます。

複数あるJavaScriptファイルやsassファイルを1つのJavaScriptファイル、1つのsassファイルにまとめる（バンドルする）ものがモジュールバンドラーであるWebpackです。

Webpackの導入を検討している人がまず気にするのは、Webpackを導入する上でのメリットとデメリットとはどういったものかでしょう。

Webpackのメリットとはなにかから説明していきます。Webpackとは複数のモジュールを1つにまとめる使い方が可能なモジュールバンドラーということもあって、その分コードが読みやすくなります。

標準仕様のES Modulesが使える、node_modulesのモジュールを結合できるなど、他のツールではできないことも可能なのもWebpackのメリットの1つです。

JavaScriptだけでなくCSSや画像などもまとめる使い方も可能ですので、Webpackとは開発者に管理しやすい環境を作りやすいものでもあります。

また、Webpack1つで設定ファイルが煩雑化しがちなのを防ぐことができますので、導入することでファイルを分担やテストの実行をしやすくすることが可能です。

なお、Webpackはファイル間の依存関係を解析した上でまとめてくれます。これがあることにより、JavaScriptやCSSの読み込み順序によってはエラーが生じてしまうケースを回避できるのです。

そのため、変なエラーが生じてしまったり、読み込みに時間がかかるのを防ぐことができ、利用するユーザー側もブラウザで読み込む時間を短くすることも可能です。

開発者だけでなく、利用するユーザーにも嬉しい点があるというのもWebpackのメリットと言えるでしょう。

そんなWebpackにあるデメリットとはなにか気になる人もいるかと思います。Webpackはメリットのほうが多いのですが、利用上いくつかデメリットも存在しています。

まずはWebpackの設定が増えると急に難しくなるという点です。知識がないままやっていると逆にWebpackを利用しないほうができた、ということもある可能性があります。

また、手間な部分という点ではあるのですが、Webpackではファイルの変更をするたびにビルドが必要です。リリース時などに忘れがちなので、ビルドする癖をつけておいたほうがいいでしょう。

Webpackでは開発環境と本番の環境の設定をそれぞれ同時に行うことができます。とはいってもそれにはデメリットが有り、それが原因で開発環境用にも関わらず本番環境の設定でリリースしてしまう、というようなことも起きてしまうため注意が必要です。

最後に、Webpackでバンドルすると元ソースがない場合ソースがそのまま表示されないこともありデバックしづらい点です。このWebpackのデメリットはソースマップを出力する設定で回避はできますので、設定しておくことをおすすめします。

では、モジュールバンドラーであるWebpackとはどのような使い方をするのか、導入方法なども含め説明していきます。

まずはWebpackを導入しましょう。Webpackの導入にはコマンドプロンプトなどを利用する必要がありますので、その点理解の上で進めてください。

まずは下記リンク先から「Node.js」をインストールしてください。

「推奨版」の方を導入しましょう。最新版だとバグなどが発生する可能性があるため、安定しているものを選択したい場合で最新版でなくても問題ないのであればこちらで十分です。

ダウンロードしたインストーラーを起動します。

インストーラーが起動しますので、「Next」をクリックしてください。

エンドユーザーライセンスへの同意画面になります。「I accept the terms in the License Agreement」にチェックを入れましょう。

「Next」で次に進みます。

Node.jsのインストール場所が表示されます。そのままで問題ありませんので「Next」をクリックしましょう。

インストールする対象とpathの設定が表示されます。ここもそのままで問題ありませんので「Next」をクリックしてください。

ネイティブ拡張の開発に必要なツール類のインストールの可否を選択します。ビルドに必要なpythonなどのツール類をインストールする場合チェックが必要ですが、基本的にチェックしなくて大丈夫です。「Next」をクリックしてください。

Node.jsのインストール確定画面になります。なお、Node.jsのインストールには管理者権限がいりますので、その点注意が必要です。

「Install」をクリックすればインストールが実行されます。ユーザーアカウント制御画面が表示されたら「はい」を押せばOKです。

上記画面になればNode.jsのインストール完了です。

Webpackの使い方の説明に移ります。まずはWebpackを導入しましょう。コマンドラインでの操作を行います。

その前に、Webpackのコンテンツ一式を保存しておくフォルダを任意の場所に作成しておいてください。例として作成したのは下記フォルダで、以下の説明でもそちらを利用していきます。

Windowsの場合はコマンドプロンプトを、Macの場合はターミナルを起動してください。

ここからはコマンドプロンプトでの説明を主体にします。特記する場合以外、Macの場合も実行するコマンドは同じです。下記コマンドで、先ほど作成したフォルダの場所を開きます。（赤字は作成したフォルダに応じて変更してください。）

下記コマンドを入力・実行して、Webpackの利用に必要なpackage.jsonファイルを生成します。

上記のような表示がされれば生成完了です。

次に、下記コマンドを入力してWebpack本体のインストールを行います。

Webpack本体のインストールには少し時間がかかります。完了するまで待ってください。

上記画面になればWebpackの導入が完了となります。この時点で作成したWebpackのコンテンツを保存するフォルダの中身は下記のようになっています。

次にWebpackファイルを使うための設定をしましょう。メモ帳を開いてください。

メモ帳などでWebpack設定ファイルである「webpack.config.js」ファイルを作成し、下記の内容を貼り付けてください。

「webpack.config.js」ファイルは最初に作成したWebpack用のフォルダ（今回の場合c:\webpacktest)に配置しましょう。前述したとおり、これはWebpackの設定ファイルです。これでWebpackファイルの設定が完了となります。

ここからはWebpackを利用して2つのモジュールをバンドルする場合の使い方の説明をしていきます。今回はWebpackで利用するディレクトリ構成が下記の状態だと仮定して、Webpackで2つのモジュールをバンドルする手順を説明していきます。

この時点で作成したほうがいいもの（フォルダ）は赤字で示しています。

まずはWebpackのエントリーポイントである「index.js」を下記のJavaScriptで作成・保存をしてください。

srcフォルダの中のjsフォルダに保存してください。

Webpackでバンドルするモジュールの定義も設定しておきましょう。メモ帳などで下記内容を記載し、「module01.js」で保存します。

同じくメモ帳などで下記の内容を貼り付けて、「module02.js」のファイル名で保存しておきましょう。

この2つのモジュールは、srcフォルダのjsフォルダの中に作った「modules」のフォルダに保存してください。

作成した、Webpackでバンドルしたいモジュールを結合するためには下記のコマンドを利用します。

これがWebpackのコマンドを走らせるものです。webpack.config.jsがある階層(今回はWebpackのフォルダとして作成した「c:\webpacktest」)でこのWebpackコマンドをコマンドプロンプトで実行してください。
 

上記のように表示されればWebpackコマンドが成功しています。

Webpackのフォルダの中の「public」フォルダの中にある「js」フォルダの中に「bundle.js」が作成されているかどうかを確認してください。

次に、「bundle.js」をHTMLファイルで読み込んで内容を確認しましょう。メモ帳などで下記の内容で「index.html」のファイルを作成してください。

作成したHTMLファイルはpublicフォルダの中に配置しましょう。

作成したHTMLファイルをブラウザで読み込んでください。今回はGoogle Chromeを利用します。HTMLファイルはドラッグアンドドロップで読み込み可能です。

上記のように表示されます。スクリプトで結合した内容はデベロッパーツールを利用して確認します。

Chromeのメニューで「その他ツール」の「デベロッパーツール」で確認しましょう。

「Console」をクリックしてください。

Webpackで結合したかった2つのモジュール（スクリプト）が結合された結果が出ていればOKです。

なお、WebpackでCSSをバンドルしたい場合はローダーが必要です。コマンドプロンプトなどで下記コマンドを入力して、Webpackで利用するための「style-loader」と「css-loader」をインストールします。

CSSファイルのバンドルをするためのWebpackの設定も必要です。webpack.config.jsファイルを開き、一番後ろに下記の内容を追記（貼り付け）してください。

なお、Webpackにはその他にも様々な機能があります。その中でもローダーとは何か、プラグインとはなにかという点を紹介します。

前述したCSSのバンドルでもちらりと触れましたが、JavaScript以外のファイルを利用するために必要なものです。imageやCSS等といったファイルを変換する使い方やバンドルする前に働きかけてより便利な使い方ができるようにできます。

CSSのバンドルには上記で説明したものを利用しますが、もう1つ便利なローダーがあります。それがBabelというものです。

JavaScriptの標準と定められているES(ECMASCript)がありますが、このES6をES5に変換することができるものがBabelなのです。

Babelの使い方もCSSのローダーのとき同様、ローダーをインストールしてwebpack.config.jsにBabelの設定を追加することをおこないます。

Babelのローダーのインストールは下記コマンドを実行してください。

また、Webpackの設定ファイルには下記の内容（※赤字部分）を追記してください。

Webpackをより便利な使い方ができるようにできるものにプラグインもあります。プラグインはWebpackでのビルド実行時に実行されるもので、ローダーとは少し異なるものです。

プラグインもWebpackにインストールして、webpack.config.jsにプラグインの設定を追記することで利用することができます。Webpackでの設定方法は割愛します。便利なプラグインには次のものがありますので、参考にしてみてください。

Webpackは、複数のモジュールをバンドルすることで煩雑なファイルをまとめることができ、開発者に管理しやすい環境を作ることが可能なツールです。

ローダーやプラグインを利用することでより便利に使うことができますので、基本的な部分から少しずつWebpackを使ってみてください。