今更、npm/webpack ってなんだ！？ってなったのでちょろっと調べてみた。数年前に一回React触ったけどまるっと忘れてしまったので復習。
参考文献
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477
https://qiita.com/koedamon/items/3e64612d22f3473f36a4
NPMとは
npm は Node Package Manager の略。javascriptパッケージをweb上の管理リポジトリから依存関係を解決しつつイイカンジに取ってくるのが主な役割と思われる。apt っぽい位置づけかな？でも apt よりも役割が多いイメージがある。Node.js のサブシステムで、node入れたら一緒についてくるヤツ。
package.json
npm init -y とかするとできる。jsパッケージ管理の起点となるファイル。ファイルの中身で最低限知っておかないとダメそうなやつをピックアップして以下に書いてみる。
dependencies & devDependencies
dependencies には production 環境、devDependencies には test や development 環境の依存パッケージの一覧が記述されるらしい。書き方等はおいおい調べようかな。
scripts
ここで記述したコマンドは npm run <command> という形で呼び出すことができる。便利。例えば、以下のような記述になっていたとして
"scripts": {
"start": "node index.js"
},
npm run start とすると node index.js が実行される。この例はあまりよくないけど、何しかタイプ数が減って便利。とかそういう感じだとおもう。
また、いくつかのキーワードは特別扱いらしく、start とか test とかは npm start や npm test で実行可能らしい。
あと、npm build とかの前後でコマンドを実行したい場合は prebuild や postbuild のように pre / post をつけておくとイイカンジにやってくれるみたい。
WebPackとは？
必要なjsファイルをイイカンジにくっつけて一つのjsファイルにすることでモジュールが使えない古いブラウザでも動くようにしよう！というモチベーションの元作成されたjsバンドラーとのこと。
npm install webpack webpack-cli --save-dev でインストールする。
npx webpack をすると、./src/index.js を起点にjsファイルをまとめて ./dist/main.js に出力する。
※ npx コマンドは ./node_modules/.bin/ にパスを通すことなく webpack が使えるようになる魔法のコマンド！便利！
まとめ
ここまで調べて、僕に必要なコマンドは npx webpack だったということになりそうです。
esbuild だと npx esbuild ./src/index.js --bundle --minify --outfile=./dist/main.js という感じになりそう。
