神戸ホームページ制作プロ公式ブログ
8.92023
JavaScript用語「webpack」を全部教えます
こんにちは、ハナちゃん。リュウです。ぜひJavaScriptに興味を持っているハナちゃんに、新しい用語を教えることができて嬉しいです。今日は「webpack」という言葉についてお話ししましょう。webpackは、JavaScriptのモジュールバンドラーと呼ばれるツールです。このツールを使うことで、複数のJavaScriptファイルやCSS、画像ファイルなどを一つのファイルにまとめることができます。これはとても便利で効率的な方法で、ブラウザがウェブサイトを読み込む際のパフォーマンスを向上させることができます。例えば、ウェブサイトで複数のJavaScriptファイルを読み込んでいると、それぞれのファイルを個別にダウンロードするために時間がかかります。しかし、webpackを使えば、それらのファイルをひとつのファイルにまとめることができるので、読み込み時間を短縮することができます。また、webpackはさまざまな機能を持っています。例えば、JavaScriptのコードを最適化したり、画像を圧縮したり、CSSファイルをバンドルしたりといったことができます。ぜひ、ハナちゃんもwebpackを使ってウェブサイトを作ってみてください。きっと素敵なウェブサイトを作ることができますよ。がんばってくださいね!
このブログは、JavaScriptに興味のある女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。
webpackとは何ですか?
ハナ: webpackとは何ですか?
リュウ: webpackは、JavaScriptを効率的に管理するためのツールですよ。イメージとしては、おもちゃのブロックを組み合わせて大きな塔を作る感じですね。JavaScriptファイルやCSSファイル、画像などの様々なファイルを一つにまとめて、うまく使えるようにします。だから、ゲームを作る時に必要なキャラクターや背景などの素材を一つの箱にギュッと詰め込んだようなイメージです。それによって、ウェブページの表示が速くなったり、一つのファイルで管理できるので、開発がしやすくなりますよ。え、分かりやすいですか?
webpackの基本的な概念は何ですか?
ハナ: webpackの基本的な概念は何ですか?
リュウ: webpackは、JavaScriptのコードを効率的に管理して、複数のファイルを1つのファイルにまとめるためのツールです。例えば、あなたが絵を描くときに、絵が完成するまでに何色もの絵の具を使うかもしれませんよね。それぞれの絵の具を使うたびに取りに行くと大変ですよね。webpackは、JavaScriptのコードを書くときに使うライブラリやフレームワークなど、たくさんのファイルを1つのファイルにまとめてくれるので、取りに行く手間を省いてくれますよ。
ハナ: なるほど、わかりました!でも、どうしてそれが必要なんですか?
リュウ: いい質問ですね!例えば、ウェブサイトを作るときに、複数のJavaScriptのファイルを使うことがありますよね。しかし、ウェブサイトを公開する際には、そのファイルを1つにまとめることで、ウェブサイトの読み込み速度を速くすることができるんです。つまり、ユーザーがウェブサイトを開いたときに、すぐに表示されるようになるんですよ。
ハナ: なるほど、ウェブサイトの読み込み速度を速くするために、ファイルを1つにまとめるんですね!それはとても便利ですね!
リュウ: そうですね!Webpackを使うことで、ウェブサイトを作るのがもっと楽しくなりますよ。例えば、写真のパズルを作るイメージです。たくさんの小さなピースを1つずつ探して組み合わせるよりも、大きなパズルのピースを使って組み立てる方が早くて簡単ですよね。webpackは、JavaScriptのコードをパズルのピースのように分割して管理してくれるんです。
ハナ: わかりました!なるほど、JavaScriptのコードをパズルのピースのように管理するんですね!とても便利なツールですね!
リュウ: そうですね!JavaScriptを学ぶ上で、webpackはとても重要なツールですよ。JavaScriptの世界の楽しさを一緒に探求していきましょう!
webpackの主な特徴は何ですか?
ハナ: webpackの主な特徴は何ですか?
リュウ: webpackの主な特徴は、複数のJavaScriptファイルやCSSファイルを1つのファイルにまとめることができることです。例えば、たくさんのおもちゃがある箱を順番に並べたり、同じ形のパズルのピースを組み合わせたりすることができるんですよ。それによって、Webサイトを高速で読み込むことができます。また、webpackはコードの最適化やエラーチェックなどの機能も持っています。これによって、開発者の皆さんは安心して便利なコードを書くことができるんですよ。そんな風にwebpackはとっても便利なツールなんですよ。ハナさんは、JavaScriptで楽しいプログラムを作りたいですか?
webpackのインストール方法は何ですか?
ハナ: webpackのインストール方法は何ですか?
webpackの設定ファイルは何ですか?
ハナ: webpackの設定ファイルって何ですか?
webpackでのエントリーポイントとは何ですか?
ハナ: リュウさん、webpackでのエントリーポイントって何ですか?
リュウ: こんにちは、ハナさん。webpackでのエントリーポイントは、まるでおうちの玄関のような存在ですよ。おうちに入るためには、まずは玄関に入らないといけませんよね?それと同じで、プログラムの実行を始めるためには、エントリーポイントが必要なんです。webpackでは、どのファイルを実行のスタート地点にするかをエントリーポイントとして指定しますよ。それから、エントリーポイントから関連するファイルを自動的に読み込んで、1つのバンドルファイルとしてまとめるんです。わかりましたか?
webpackでの出力ファイルとは何ですか?
ハナ:リュウさん、webpackでの出力ファイルって何ですか?
リュウ:ハナさん、webpackでの出力ファイルとは、JavaScriptのコードをまとめたファイルのことですよ。例えば、学校の授業で友達と一緒にプレゼンテーションをするとき、みんなが話す内容を1つの資料にまとめるような感じです。
ハナ:わかりました!JavaScriptのコードをまとめたファイルなんですね。じゃあ、それを使うと何ができるの?
リュウ:そうですね、例えばウェブサイトを作るとき、たくさんのJavaScriptのファイルがあると、読み込むのに時間がかかってしまいます。でも、webpackでそれらのファイルをまとめることで、1つのファイルにしておくことができます。その結果、ウェブサイトの読み込みが早くなるんですよ。
ハナ:なるほど!たくさんのファイルを1つにまとめることで、ウェブサイトの読み込みが早くなるんですね。それってすごいことですね!
リュウ:そうですね、とても便利な機能ですよ。ウェブサイトのパフォーマンス向上に役立つし、開発の効率も上がります。だから、Web制作でよく使われるんですよ。
ハナ:わー、すごいですね!いつか私も自分でウェブサイトを作ってみたいな。リュウさん、これからも色々教えてくださいね!
リュウ:もちろん、ハナさん。いつでも質問してくださいね。一緒にJavaScriptの世界を楽しみましょう!
webpackでのモジュールとは何ですか?
ハナ: リュウさん、webpackでのモジュールって何ですか?
リュウ: ハナさん、webpackでのモジュールについて説明するね。webpackは、さまざまなJavaScriptのファイルやライブラリを効率的に管理するためのツールです。そして、モジュールとは、プログラムを構成する部品のことを指します。例えば、お菓子作りで言うと、小麦粉や砂糖、バターなど、それぞれの材料がモジュールに相当します。モジュールを使うことで、プログラムの開発や管理がしやすくなりますよ。
ハナ: なるほど、モジュールはプログラムの部品なんだね。それにwebpackはモジュールを管理するためのツールなんだね!
リュウ: そうです!webpackを使えば、複数のJavaScriptファイルを一つにまとめたり、依存関係を解決したりすることができます。例えば、お菓子作りでいうと、小麦粉や砂糖を一つの容器にまとめて混ぜるイメージです。分けていた材料を一つにまとめることで、便利に使うことができるんですよ。
ハナ: わかった!分かりやすく教えてくれてありがとう、リュウさん!
リュウ: どういたしまして、ハナさん!もしわからないことがあったらいつでも聞いてくださいね。応援していますよ!
webpackでのローダーとは何ですか?
ハナ: リュウさん、webpackでのローダーって何ですか?
リュウ: ハナさん、こんにちは!webpackでのローダーとは、JavaScriptのコードに変換や加工を行うためのツールですよ。例えば、webpackでCSSファイルを読み込む時に、ローダーを使ってCSSをJavaScriptのコードに変換してから読み込むことができるんです。ローダーは、さまざまなファイル形式やプリプロセッサ言語を扱うことができますよ。
ハナ: なるほど、ローダーはJavaScriptのコードを変換するツールなんですね!でも、なんでCSSをJavaScriptのコードに変換するのですか?
リュウ: 実は、JavaScriptのコードに変換することで、CSSの読み込みを効率化できるんです。CSSはブラウザが読み込むのに時間がかかることがありますが、JavaScriptのコードは効率的に読み込まれるため、ページの表示速度が向上するんですよ。また、JavaScriptのコードとして扱うことで、CSSの変数や関数を使ったり、動的にスタイル情報を生成することも可能になります。
ハナ: なるほど!ローダーを使うと、CSSの読み込みをスムーズにすることができるんですね!他にもローダーはどんなことができるんですか?
リュウ: ローダーは、JavaScript以外のファイル形式やプリプロセッサ言語も扱えますよ。例えば、TypeScriptやCoffeeScriptといったJavaScriptの拡張言語を変換することもできるんです。さらに、画像ファイルの圧縮や、CSSやHTMLの最適化もローダーを使って行うことができます。つまり、ローダーは様々なファイルの変換や処理を行い、開発の効率化やパフォーマンスの向上に役立ってくれるんです。
ハナ: すごい!ローダーはいろんなことができるんですね!それによって開発がしやすくなりそうですね!
リュウ: そうですね、ハナさん。ローダーを使うことで、開発の効率が向上し、より高性能なウェブアプリケーションを作ることができますよ。時には、少し難しい概念や機能もありますが、きっとハナさんなら理解できるはずです。何か分からないことがあったら、いつでも聞いてくださいね!応援していますよ!
webpackでのプラグインとは何ですか?
ハナ: webpackでのプラグインって何なんですか?
webpackでのモードとは何ですか?
ハナ: webpackでのモードって何ですか?
リュウ: webpackでのモードについて説明しますね。webpackのモードは、プロジェクトのビルド(コンパイル)のモードを指定するためのものです。モードには3つのオプションがあります。開発モード、本番モード、そしてモードを指定しないデフォルトのモードです。開発モードは、コードの変更を検知して自動的にビルドしなおしてくれるので、開発中に便利です。本番モードは、コードの最適化や圧縮を行って、最終的なファイルサイズを小さくし、高速化する役割があります。デフォルトのモードでは、開発モードと同様の動作をします。
webpackでのバンドルとは何ですか?
ハナ: webpackでのバンドルって何ですか?
リュウ: webpackでのバンドルとは、JavaScriptのコードやその他のファイルを1つのファイルにまとめることです。例えば、複数のJavaScriptファイルがある場合に、webpackでバンドルすることでそれらを1つのファイルにまとめることができます。これにより、ファイルの読み込みを減らすことができて、ページの表示速度が向上しますよ。
ハナ: 1つのファイルにまとめると、どんなメリットがありますか?
リュウ: 例えば、複数のJavaScriptファイルを別々に読み込むと、ファイルの読み込みに時間がかかってしまいます。しかし、webpackを使ってバンドルすることで、1つのファイルにまとめられるため、読み込み時間が短くなります。また、バンドルすることで、コードの整理や複雑な依存関係の管理もしやすくなりますよ。
ハナ: なるほど!ですが、バンドルするというのはどうやって行われるんですか?
リュウ: バンドルするためには、webpackというツールを使います。webpackは、コンフィグファイルに書かれた設定に基づいて、バンドルの処理を行います。具体的な手順は、コンフィグファイルにエントリーポイントとなるJavaScriptファイルを指定し、必要なモジュールやライブラリをインポートして依存関係を解決します。そして、最終的に1つのバンドルされたファイルが出力されます。
ハナ: なるほど!バンドルって、とても便利なんですね!
リュウ: そうですよ!バンドルすることで、ファイルの読み込み時間を減らしたり、コードの整理をしたりすることができます。また、バンドルされたファイルは、ウェブサイトの表示速度を向上させる効果もあります。便利ですよね。
webpackでのホットモジュールリローディングとは何ですか?
ハナ: リュウさん、webpackでのホットモジュールリローディングって何ですか?
リュウ: こんにちは、ハナさん!ホットモジュールリローディングは、ウェブサイトを作る時に、JavaScriptのコードを変更した時に、ブラウザが自動的にその変更を反映してくれる機能のことです。例えば、お絵かきをする時に、絵を描いている最中に自動的に絵の変化が反映されるのと似ています。そうすることで、コードの変更を効率的にテストしながら開発できるんですよ!
ハナ: お絵かきをしている時に絵が自動的に変わるって楽しそうですね!具体的にどうやって使うんですか?
リュウ: 良い質問ですね!ホットモジュールリローディングを使うためには、まずwebpackというツールを使う必要があります。このツールを使って開発環境を作り、コードを書いています。そして、コードを変更すると、ブラウザが自動的に変更内容を反映してくれます。これによって、変更した結果をすぐに確認しながら、効率的に開発ができるんですよ。
ハナ: なるほど、webpackを使って開発環境を作るんですね!でも、ブラウザが自動で変更を反映するってどうやってするんですか?
リュウ: 質問上手ですね!ホットモジュールリローディングは、特別なサーバーを使っています。このサーバーは、コードの変更を検知して、変更箇所だけをブラウザに送っています。そして、ブラウザはその内容を受け取って、自動的にページをリロードします。つまり、画面の一部だけが変わるようになっているんですよ。
ハナ: なるほど、サーバーが変更点を検知して、ブラウザが変更を反映するんですね!とても便利そうです!
リュウさん、回答ありがとうございました!とても分かりやすかったです!
リュウ: どういたしまして、ハナさん!分かりやすく説明できて良かったです!もし他に質問があればいつでも聞いてくださいね!応援していますよ!
webpackでのコード分割とは何ですか?
ハナ: リュウさん、webpackでのコード分割って何ですか?
リュウ: webpackでのコード分割は、一つの大きなJavaScriptファイルを複数の小さなファイルに分割することです。例えば、大きなウェブサイトを作るときには、たくさんのJavaScriptコードが必要になりますが、すべてを一つのファイルに書くと分かりにくくなりますよね。そこで、コード分割を使って、機能ごとにファイルを分割することで、管理しやすくなるんです。それによって、サイトの読み込み速度も向上するんですよ。
ハナ: なるほど、大きなファイルを分けて小さなファイルにすることで、見やすくなるんですね!それで、どうやって分けるんですか?
リュウ: 良い質問だね!webpackでは、特定の箇所でファイルを分割するための構文を使います。例えば、import文やrequire文を使って、別のJavaScriptファイルを読み込むことができます。そうすることで、大きなファイルを小さなファイルに分割することができるんだよ。
ハナ: import文やrequire文ってどんな感じですか?
リュウ: よく聞く言葉かもしれないね!import文やrequire文は、他のJavaScriptファイルのコードを使うために使われるんだよ。例えば、あるファイルで別のファイルの関数や変数を使用したい場合、import文やrequire文を使って、そのファイルを読み込んで使用することができるんだ。これによって、機能ごとにファイルを分割して、必要な時に読み込むことができるようになるんだよ。
ハナ: なるほど、import文やrequire文を使って、他のファイルのコードを使うことができるんですね!でも、それってどんなメリットがあるんですか?
リュウ: 良い質問だね!コード分割を使うことで、大きなファイルを小さく分けることができるから、見やすくなるだけでなく、ファイルの読み込み速度も向上しますよ。なぜなら、サイトを開くときにすべてのJavaScriptファイルを読み込む必要がなくなるからです。そのため、サイトの表示が速くなったり、ユーザーが待たされる時間が短くなったりするんです。つまり、コード分割はウェブサイトの性能を向上させるための重要なテクニックなんだよ。
ハナ: なるほど、ファイルが小さくなることで、ウェブサイトが速く表示されたり、ユーザーが待たされる時間が短くなるんですね!分かりました、ありがとうございました!
リュウ: どういたしまして!質問があればいつでも聞いてくださいね。引き続きJavaScriptを楽しんで学んでいってください!がんばってくださいね!
webpackでのキャッシュとは何ですか?
ハナ: リュウさん、webpackでのキャッシュって何ですか?
webpackでの環境変数の使用方法は何ですか?
ハナ: webpackでの環境変数の使用方法は何ですか?
リュウ: ハナさん、こんにちは!webpackでは、環境変数を使うためには、まずwebpackの設定ファイル(通常はwebpack.config.jsという名前)を編集する必要がありますよ。この設定ファイルでは、環境変数を定義したり、他のファイルで使えるようにするための設定を行います。
例えば、環境変数としてAPIのエンドポイントURLを定義したい場合、設定ファイルで以下のように書きます。
“`
const API_ENDPOINT = ‘https://example.com/api’;
module.exports = {
// webpackの設定
// …
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
API_ENDPOINT: JSON.stringify(API_ENDPOINT) // ここで環境変数を設定しています
})
]
};
“`
この設定によって、HTMLファイル内で`API_ENDPOINT`という変数を使うことができるようになります。例えば、JavaScriptファイル内で以下のように書けば、エンドポイントURLが環境変数から取得できます。
“`
fetch(`${API_ENDPOINT}/users`)
.then(response => response.json())
.then(data => {
// データを使って何かしらの処理をする
});
“`
設定ファイルを編集することで、環境変数を使って様々な値を他のファイル内で使うことができますよ。分かりやすく説明できましたか?
例えば、環境変数としてAPIのエンドポイントURLを定義したい場合、設定ファイルで以下のように書きます。
“`
const API_ENDPOINT = ‘https://example.com/api’;
module.exports = {
// webpackの設定
// …
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
API_ENDPOINT: JSON.stringify(API_ENDPOINT) // ここで環境変数を設定しています
})
]
};
“`
この設定によって、HTMLファイル内で`API_ENDPOINT`という変数を使うことができるようになります。例えば、JavaScriptファイル内で以下のように書けば、エンドポイントURLが環境変数から取得できます。
“`
fetch(`${API_ENDPOINT}/users`)
.then(response => response.json())
.then(data => {
// データを使って何かしらの処理をする
});
“`
設定ファイルを編集することで、環境変数を使って様々な値を他のファイル内で使うことができますよ。分かりやすく説明できましたか?
webpackでのモジュール解決方法は何ですか?
ハナ: webpackでのモジュール解決方法って、どうやるの?
リュウ: おっしゃる通り、webpackでのモジュール解決方法についてお教えしますね。webpackでは、モジュールをインポートする際に、相対パスや絶対パスを指定することができます。相対パスは、現在のファイルから見た他のファイルまでのパスを表し、絶対パスはファイルのルートディレクトリから見たパスを表します。
ハナ: 相対パスと絶対パスって、どう違うの?
リュウ: 良い質問ですね。相対パスは、現在のファイルから見た他のファイルまでのパスで、そのファイルとの関係性を示します。例えば、現在のファイルから見て「一つ上のディレクトリにあるscript.js」というファイルを指定したい場合、相対パスで「../script.js」と書くことができます。一方、絶対パスは、ファイルのルートディレクトリから見たパスで、そのファイルの場所を完全に指定します。
ハナ: なるほど!相対パスと絶対パスがあるんだね。絶対パスってどうやって書くの?
リュウ: 絶対パスは、「/」から始まるパスです。たとえば、ルートディレクトリから見て「script.js」というファイルを指定したい場合、「/script.js」と書くことができます。このように絶対パスでは、ファイルがどこにあっても確実に指定できるので、便利ですね。
ハナ: なるほど、相対パスって関係性を示すんだね。絶対パスはどこにあってもいいんだね。
リュウ: そうですね。相対パスは、現在のファイルから見た他のファイルまでのパスを表し、関係性を示しています。一方、絶対パスは、ファイルの場所を完全に指定する方法として利用されます。これらの方法を使って、webpackではモジュールの解決を行っています。
ハナ: なるほど!相対パスと絶対パス、ちょっと分かったかも!ありがとう、リュウさん!
リュウ: どういたしまして、ハナさん!分かりやすく説明できて良かったです。まだ疑問があれば何でも聞いてくださいね!頑張ってください!
webpackでのソースマップとは何ですか?
ハナ: webpackでのソースマップとは何ですか?
リュウ: こんにちは、ハナさん!webpackのソースマップは、JavaScriptのデバッグをサポートするためのものですよ。具体的には、JavaScriptのソースコードを元に、実際に実行されるコードの位置を特定することができます。
ハナ: そうなんですね!それってどういう風に使うんですか?
リュウ: ソースマップを使うと、開発者がブラウザのデベロッパーツールでJavaScriptのエラーを見つける際に、ソースコードの位置を正確に特定できるんです。例えば、エラーメッセージに出てくる行数やファイル名が分からなくても、ソースマップを使うことで正しい場所を見つけることができます。
ハナ: なるほど!ソースマップの詳しい使い方を教えてもらえますか?
リュウ: もちろんです!ソースマップを有効にするには、webpackの設定ファイルでsourcemapの設定を追加する必要があります。また、ソースマップを生成するためには、webpackでバンドルされるJavaScriptファイルと一緒にソースマップファイルも生成する必要があります。
ハナ: わかりました!ソースマップって、本当に便利そうですね!ありがとうございました、リュウさん!
リュウ: どういたしまして、ハナさん!ソースマップは、開発者にとってとても役立つツールです。エラーを見つけるだけでなく、コードの品質やパフォーマンスの改善にも役立ちますよ。頑張ってJavaScriptを学んでくださいね!応援しています!
webpackでのプロファイリングとは何ですか?
ハナ: webpackでのプロファイリングって何ですか?
リュウ: ハナさん、プロファイリングは、ソフトウェアの処理時間やリソースの使用状況などを調べるための方法ですよ。具体的には、プロファイリングを使って、どの部分の処理が遅いのかや、メモリの使用量が多い箇所を見つけることができます。これによって、プログラムの改善点を見つけたり、最適化することができますよ。
ハナ: なるほど、プロファイリングはコードの効率を調べるための方法なんだね。具体的にはどうやって調べるの?
リュウ: 良い質問ですね。プロファイリングをするためには、特定のツールを使います。たとえば、Chrome開発者ツールの”Performance”タブや、Node.jsの”profiler”モジュールなどがあります。これらのツールを使って、処理時間やメモリの使用状況などを計測し、詳細な情報を見ることができますよ。
ハナ: それなら、具体的にどうやって使うんですか?
リュウ: よく聞いてくれていますね。例えば、Chromeの開発者ツールの”Performance”タブを使う場合、まずツールを開いて、録音ボタンを押します。その後、プログラムを実行して、必要な操作や処理を行います。処理が終わったら、録音を停止して、結果を確認することができますよ。そこには、処理時間や関数の呼び出し回数、メモリの使用量などが表示されます。
ハナ: なるほど、プロファイリングはツールを使って計測して、結果を見るんですね。処理が遅いところやメモリをたくさん使っているところが分かるんだね。
リュウ: その通りです!プロファイリングを使うことで、処理のボトルネックやメモリの問題を見つけることができます。そして、それらを改善することで、プログラムがより効率的になるんです。
webpackでのコンテキストとは何ですか?
ハナ:リュウさん、webpackでのコンテキストって何ですか?
リュウ:うーん、webpackのコンテキストですね。まず、webpackはJavaScriptのモジュールバンドラーです。モジュールバンドラーとは、複数のJavaScriptファイルをひとつのファイルにまとめる役割を持つものなんです。そして、webpackでのコンテキストとは、そのまとめる対象となるファイル(モジュール)のルートディレクトリのことを指します。
例えば、私たちがロゴや画像、CSSなどのファイルをJavaScriptから扱いたいとき、webpackのコンテキストを設定することで、そのファイルたちがどのディレクトリにあるかを指定できるんです。つまり、コンテキストを設定することで、JavaScriptから簡単に他のファイルにアクセスすることができるようになるんですよ。
例えば、私たちがロゴや画像、CSSなどのファイルをJavaScriptから扱いたいとき、webpackのコンテキストを設定することで、そのファイルたちがどのディレクトリにあるかを指定できるんです。つまり、コンテキストを設定することで、JavaScriptから簡単に他のファイルにアクセスすることができるようになるんですよ。
ハナ:なるほど、わかりました!webpackはたくさんのファイルをひとつにまとめる役割を持っていて、それをコンテキストで指定することで、他のファイルにアクセスできるんですね。すごいですね!
リュウ:そうですね、すごいですよね!これによって、開発の効率がアップし、ファイルの管理も簡単になりますよ。例えば、ロゴがたくさんあるサイトを作る場合、それぞれのロゴのパスを手動で書くのは大変ですが、コンテキストを使えば簡単にアクセスできます。だから、webpackのコンテキストはとても便利な機能だと言えるんですよ。
ハナ:わぁ、便利ですね!リュウさん、ありがとう!次回もよろしくお願いします!
リュウ:いいえ、どういたしまして!また質問があったらいつでも聞いてくださいね、ハナさん。お互いJavaScriptの世界を楽しみましょう!