webpack,、モジュール、 import exportについて

Question

JavaScriptでのwebpack、モジュールなどに関していくつか質問です。

① 現在JSでモジュールを使用するために多く使われているimport, exportは、ブラウザがそのコードを読み込んだ際に、そのファイルをサーバーからロードする。と曖昧に思っているのですが、これはあっているでしょうか？

② webpackはそのimport, exportされているモジュールを1つのファイルにまとめる、つまりブラウザが何回もサーバからファイルをロードする必要がなく、処理を軽くするためのツールであり、これが複数あるwebpackの機能の1つである。という認識はあっているでしょうか？

③ webpackがローダーを使うことで、JSファイル以外のバンドルも実現でき、適切に設定すればHTMLとJSを別々のファイルに分けている場合でも1枚のファイルにでき、そのwebpackによってその生成された１枚のファイルがブラウザに送られるということなのでしょうか？

④ またwebpackには別の機能も存在し、モジュールをバンドルする際に例えばvueやtypescriptのコンパイル、またJSのトランスパイルなどもできる。ということなのでしょうか？

よろしくお願いいたします。

Answer 1

ブラウザがそのコードを読み込んだ際に、そのファイルをサーバーからロードする。と曖昧に思っているのですが、これはあっているでしょうか？

使い方によります。ブラウザで直接モジュールを処理させることもできますが、事前にWebpackなどで処理をして、結果をブラウザで使う、というようなやり方も多いです。

webpackはそのimport, exportされているモジュールを1つのファイルにまとめる、つまりブラウザが何回もサーバからファイルをロードする必要がなく、処理を軽くするためのツールであり、これが複数あるwebpackの機能の1つである。という認識はあっているでしょうか？

もう1つの意味として、「importやexportに対応していないブラウザでも実行可能となる」ということがあります。

webpackがローダーを使うことで、JSファイル以外のバンドルも実現でき、適切に設定すればHTMLとJSを別々のファイルに分けている場合でも1枚のファイルにでき、そのwebpackによってその生成された１枚のファイルがブラウザに送られるということなのでしょうか？

通常、HTMLとJavaScriptを一体化するようなことは行いません。

またwebpackには別の機能も存在し、モジュールをバンドルする際に例えばvueやtypescriptのコンパイル、またJSのトランスパイルなどもできる。ということなのでしょうか？

各種のプラグインがあって、拡張できます。

Comments

[suny]

ありがとうございます！

再度質問なのですが、例えば A.html というファイルがブラウザに送られ、そのAは B.js というファイルを呼びだすとします。

そのBは C.js D.js をimportしているとします。

これをwebpackでビルドした場合、B,C,Dのファイルが合わさったファイルEが作成され、実際にA.htmlが呼びだすのはwebpackが作成したファイルE。ということなのでしょうか？

よろしければお願いいたします。