Arsaga Partners, Inc.

TOP

>

KNOWLEDGE

>

DX用語辞典

>

webpack

webpack

読み方:うぇぶぱっく

  

webpackとは

JavaScriptアプリケーション用のモジュールバンドラーの1つです。
モジュールバンドラーとは作成したアプリケーションのモジュール(ファイル)を1つに束ねる機能のことです。フロントエンドで使用するためのJavaScriptのライブラリ、CSS、画像など圧縮し、まとめてくれます。

 

そもそもモジュールバンドラーとは

  • 依存関係(※)のあるJavaScriptのモジュールを解決
    従来のJavaScriptの依存関係は、htmlにscriptを記述する必要があり、複雑になりがちでした。webpackでは、依存関係を自動的に解決してくれます。

     

    ※ある作成したプログラムを動作させる際に、動作させるために必要な別のプログラムがあることです。例えば、dateオブジェクトを使用してプログラムを書いた時、そのプログラムはdateオブジェクトに依存している(dateオブジェクトを利用しないと実現できない)ことになります。

  •  

  • 1つのファイルにまとめることで通信回数を抑える
    従来のJavaScriptは、モジュール(ファイル)が増えると通信回数も増えてしまいました。webpackでは、モジュールを1つのファイルにまとめているため、通信回数を少なくすることができます。

 

webpackのメリット

今までモジュールバンドラーとして、gulpやBrowserifyなど様々なツールがありましが、これらにはビルドが遅い、設定が面倒などの欠点がありました。そんな問題点を解消したのがwebpackです。

 

Javascriptの他にもCSSや画像も圧縮することができるので、リクエストするファイルを減らしてくれます。結果、アプリケーションのパフォーマンス向上に繋がります。

 

webpack関連の歴史

2009年頃:バックエンドでもJavaScriptを書きたい!という需要が生まれ、Node.jsが作成された。

 

2012年頃:ブラウザでもモジュールが使えるように!とwebpackがリリース。

 

2015年:webpackがモジュールバンドラーとしてパフォーマンスがいいと評価され流行。

 

現場の声

JavaScriptのファイルを分割してもサイトがスムーズに動くのは、webpackのおかげだなーと改めて思いました。ビルドする時にCSS、画像ファイル等の名前を毎回変えてくれるので、キャッシュが残って変更が反映されない!のようなトラブルも無いので、スムーズな開発ができます。

 

Nuxt.jsのような主要のフレームワークでは、webpackが標準搭載されているので、設定方法がより簡単になります。そのため、開発経験が浅いエンジニアでもwebpack(モジュールバンドル)が触れる時代になったと言えるでしょう。

 

 

関連用語

Node.js
バンドル
ES Modules
Glup

 

 

<執筆・監修>
アルサーガパートナーズ株式会社 DX技術用語集制作チーム フロントdivision

制作・監修

アルサーガパートナーズ
DX技術用語辞典 制作チーム

当社は、営業部隊を持たないDX開発パートナースタジオです。

お問い合わせはこちら

CONTACT

下記よりお気軽にご相談ください。

LINEでお問い合わせ

RECRUIT

採用情報

アルサーガパートナーズ株式会社は、一緒に働く仲間を募集しています。 「人間らしく生きる」「自分で考えて行動する」という文化を重視しており、「バグを否定しない」という言葉を掲げています。 挑戦をし続けることが一番の成長に繋がると信じているからです。 まずは挑戦する第一歩を踏み出してもらえれば幸いです。

RECRUIT

採用情報