目的

webpackを用いたbuildで何が起こっているのかをざっくり理解する

webpackとは？

webpackはモジュールバンドラの一種

バンドラ
ファイル間の依存関係を解決しながら、複数のjsxファイル（モジュール）等を結合することでWEBリソースを最適化する
一般的にはバンドル処理を行うことでページの読み込み速度向上が見込める

また、単純なページ読み込み速度向上だけではなく様々な最適化処理を行ってくれる。

・静的解析
・トランスパイル
・Minify処理
・ツリーシェイキング
・難読化

静的解析

コード上のベストプラクティスに沿ってない記述などを警告してくれる機能

例えば

a == b　を　a === b　にしなさい
や
関数名がキャメルケースになってない
や
関数ｈ一度に渡す引数が多すぎる(20個とか)
など

この静的解析をクリアできないとビルドが行えないことがある
（現にgithub Actions上ではデフォルトだと却下されてしまった）

最低限のコードの質が担保される上にチーム内での記述に統一感が出るのでしっかりと静的解析はクリアすべきか。

トランスパイル

開発においては一つの言語の特定のバージョンで開発を進めていくのが一般的。
しかし、最新バージョンでもすべてのブラウザ等で互換性があるとは限らない。
最新の言語機能を使ったが、全然動いてくれない。。。など

最新のJavascript(ES6)やTypescriptなどを広範なブラウザ互換性を持つ古いバージョンのJavascriptに変換してくれる機能がトランスパイル。
最新の言語機能を使用してもある程度、古いバージョンと互換性のあるコードに変換してくれるので動作保証性を向上してくれます。（どこまで担保されるかはわからん。。。）

Minify処理

コードの無駄な箇所を取り除いてファイルサイズを小さくしてくれる機能

・無駄な改行の削除
・コメントの削除
・変数名をa,bなど簡略にする（マングリング）

また、Minify処理の際には難読化も同時に行われる
この難読化はbuildファイルと同じ階層のSourceMapファイルで復元可能
ただし、コードが復元可能で生で読める状態で提供するとコード上の脆弱性の特定が容易になってしまうために基本的にNG

SourceMapはクライアント側からアクセスできない箇所に保管するなどして難読化を解除できないようにするのが理想

参考にさせていただいたサイト：Fintan様

https://fintan.jp/page/1596/

ツリーシェイキング

利用されていない不要なコード（デッドコード）を取り除いてくれる機能
自分も使ったことないし、理解できていない

難読化

ソースコード自体を一般ユーザ側から簡単には読めない形にすること

難読化を行うメリットは以下の通り

・ソースコードのコピーなどによる製品/仕様の流用を防ぐ
　⇒特に重要なアルゴリズムなどが含まれているコードの場合はその部分がコピー/解析されると大きな損害となるので難読化の重要性が高まる

・ソースコードの脆弱性の特定を困難にする
　⇒ソースコードが生で閲覧できると、脆弱性の特定が容易になる

難読化の強度はおいておいて、難読化自体は行うべきだと思われる
ただし、世に出回ってる難読化ツールによる難読化はすぐ解読されるケースも