Q&A
1については、「そもそも正しく設定しなければWebpackを回すことが出来ない（Webpackは設定どおりに動く）ので、疑問が成立しない」です。
背景
Typescriptなんもわからんの初心者です。
Typescript + Expressでアプリを作っています。ファイル構成は大雑把にこんな感じです。
-bin -node_modules -public --stylesheets --javascripts -routes -src -views -app.ts
route,srcフォルダにはサーバーサイドのTypescriptが、public/javascriptsにはフロントサイドのJavascriptが入っており、これまではサーバーサイドのみtscで素朴に変換していました。
ですが、フロントエンド側のjsファイルもTypescriptで書きたいと思い色々調べたところ、フロント側ではExportなどの文に対応していないため、webpackなどのツールを使って、一つのファイルにバンドルして出力すれば使えるようになる、ということを知りました。
#疑問
webpackというツールの紹介として、jsやcssなど様々なファイルをバンドルして一つにまとめる、という風に紹介されていることが多いです。
ですが、今の構成で単に全てのファイルをバンドルすると、サーバーサイドのファイルもクライアントサイドのファイルも一緒くたにバンドルされてしまうような気がして、それは変に感じています。
サーバーはサーバーで、クライアントはクライアントで、それぞれにバンドルするのが正しいと思うのですが……。
#質問
大きく2つあります。
①この疑問は正しいのでしょうか？間違っているのでしょうか？
②正しいのであれば、webpackは別々にバンドルするようなこともできるのでしょうか？
以上、よろしくお願いいたします。
回答2件
0
ベストアンサー
webpack.config.jsに書いてある必要最小限のファイルしか使いません。
まずentryキーにあるJSファイルを開いて
中のソースコードを読み取って解析します。
そしてrequire文なり、import文なりを見つけたら
node_modulesや同じディレクトリに存在するJSファイルを拾ってきて
それを静的解析します。
以下同じ手順の繰り返し。
これで必要な関数・モジュールが全て出揃ったらそれを一つのファイルとして吐き出して終わり。
だから必要最小限になるのです。
この時一つ注意点があります。
js
1# こういう風に変数で動的にrequire叩くような作りにすると静的解析出来ない 2for (const it of ["taro", "jiro"]) { 3 require("./" + it + ".js"); 4}
もし追加で読み込ませておかないとエラーで死ぬコードがある場合、
それをwebpack.config.jsに追記しましょう。
投稿2021/05/08 05:01
総合スコア21158
0
ですが、今の構成で単に全てのファイルをバンドルすると、サーバーサイドのファイルもクライアントサイドのファイルも一緒くたにバンドルされてしまうような気がして
1も2も、設定次第です。
投稿2021/05/08 03:51
総合スコア145208
ええと、この場合の『正しく』とは具体的にどういうことですか？
「出力したい形になるように設定する」という意味です。
（もちろん、「全部一緒くたで出力されるような設定」にして動かすことも出来ますが、わざわざ自分からそんな設定にすることはないでしょうし）
ええと、それでは、②について、「webpackは、設定次第で、全てのファイルを一緒くたにバンドルすることも、細かく条件を指定して（例えば特定のフォルダのファイルだけ等）バンドルすることもできる」という風に受け取って良いでしょうか？
それと、①について、聞き方が悪かったです。フロントサイドではフロントサイドで使用するファイルのみをバンドルする、というやり方は一般的ですか？（もしくは、maisumakunさんはそう考えますか？）
> それでは、②について、
そのとおりです。
> それと、①について
バックエンドとフロントエンドのコードの依存具合によっても違うかなと考えます。たとえば、サーバサイドレンダリングで両者に共通するコードベースが多い場合は、両方まとめて処理するのが適切です。
わかりました。ありがとうございました
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/08 05:42