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」をインストールしてください。

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

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