前書き

今回はwebpackについてです。現在は、Nuxt.jsやNext.jsなどのフレームワークに標準搭載されていて、あまり意識せずに開発をしてきたので、きちんと機能を理解するためにまとめようと思いました。

​

本題

Webpackとは?

Webpackは複数のJavaScriptファイルを一つのファイルにまとめて出力する静的モジュールバンドラーです。モジュールバンドラーとは、複数のファイルを一つに束ねる機能のことです。もともと、Javascriptを複数のファイルで管理することが多く、それを解決するために生まれたものです。主にJavascriptをバンドルする役割が多いが、CSSや画像もバンドルできます。 ​

Webpackの経緯

webpackが開発される以前にも、gulpやBrowserifyなどのモジュールシステムがありました。しかし、基本的には、全てのむジュールを一つのファイルにまとめるといったもので、最近のフロントエンドで増加してしまったコードの量からするとファイルがかなり大きくなってしまいます。また、あまり使用されない機能のちょっとした変更であっても、プロジェクト全体の処理が含まれるファイルが更新されることになるため、キャッシュが非効率になるという問題もありました。そこで開発されたのがWebpackだそうです。

Webpackの主な機能

• バンドルし、一つのファイルに束ねることで、通信する回数を抑えることができる。
• 開発の際にファイルを分けることで、機能毎に分割ができ、開発効率が向上。 ​

モジュールバンドラーの中でWebpackが優れている点

webpackでは「コード分割（Code Splitting）」と呼ばれる機能によって、各ページで必要とされるコードとその依存関係にあるファイルだけをバンドルして提供する機能を備えています。コード分割によってバンドルされたファイルの固まりは「チャンク（chunk）」と呼ばれます。