日記 2023/03/26_学んだことを言語化してみる。

今日はwebpackを使用してbootstrapのcssとjs、それからchart.jsをバンドルを組み、Webサイトに反映させることを目標としていた。

結果、光は大体見えてきた。

まず、webpackを使用してbootstrapのcssをバンドルするには、npmでbootstrapとwebpackをインストールすることはもちろん。
webpackは本来、jsモジュールとpackage.jsonを読みに行くようなので、webpack.config.jsでloader（style-loaderとcss-loader）を設定してやる必要がある。

そしてバンドルを組むのだが、npx webpackを実行する際、webpackはsrc/index.jsを読みに行くので（おそらく「基本的には」ということなのだろう。）、そのツリーを作ってやる必要がある。
そしてこのindex.jsでbootstrapのスタイルシートの機能をインポートする。

npx webpackすると、、、main.jsできた。

自作のwebサイトでこいつ（main.js）を読み込んで、bootstrapで使用されるクラスをつけてやると、、、おお、できた。

後はjsとchart.jsなんだが、おそらくこれについてはwebpack.config.jsでentryとoutputを設定してdest内に作ったjsファイルをいじってやれば何とかなるんじゃないかと思う。（適当）
ただ、とりあえずchart.jsはインストールしたが、どこからバンドル組めばよいのやら、、、
あと3時間くらい、粘ってみようか。

ていうかここに書くくらいならqiitaに書けって感じだけど。

プログラマ多いから、向こうに書くのはちょっと怖いかな。

※この記事に書いている理解はあくまでも私自身のものです。まだまだエアプなので参考にはなさらないでください。（万が一ということもあるので、一応書いておきます。）

参考にしたサイト：
https://ics.media/entry/12140/
https://ics.media/entry/17749/
https://webpack.js.org/
https://getbootstrap.jp/docs/5.0/getting-started/introduction/