Webpack

Node.js環境下で動作するモジュールバンドラー
- 複数のファイルを1つにまとめるイメージ
- 複数のモジュールをひとまとめにして使用するイメージ
モジュール
- 機能ごとに分割されたファイルで、モジュール内で個々の処理を効率よく利用できるようにしたもの
バンドル
- ファイルをまとめること
- バンドラはファイルをまとめるツール
ローダ
- コンテンツなどのファイルを読み込むための機能
特徴
- いろんなUCを想定した環境を作成できる
- リクエスト数を削減できる
  - ファイルサイズは大きくなってしまいがちになる
  - 最初の読み込みに時間がかかる可能性がある
LaravelにもWebpackを使えるものがある
レスポンスとして小さいファイルをたくさん呼ばれるとサーバ側の負荷もあがる
- TCP/IPだと、毎回ハンドシェイクが発生する
- ファイルが増えるほど負荷があがるのは自明
ややこしくなると、設定が複雑になってしまう
エントリを2つに分けるとややこしい(？)
イベント発火の順番を分ける処理を考えていると、まとめられると意図しない挙動をしたりする
関数名とかも適当な名前に変換されてしまったりする
- 元のライブラリが悪いと、名前変更のため動かなくなってしまったりする
- ライブラリ同士で競合して動かなくなったりもする
VueとかReactのフレームワーク側に既に機能としてついてたりする
- ややこしいことをしようとすると修正の知識が必要になる

参考

yarn, webpack, babel, ビルドできる環境を作る - Qiita
- Qiita
- https://qiita.com/fuubit/items/02a78744196e17869548
- 2021/07/05
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
- Qiita
- https://qiita.com/riversun/items/d27f6d3ab7aaa119deab
- 2021/07/05