インストール

任意のディレクトリで下記のコマンドを実行します。

npm i bootstrap@5.3.0

下記のようなディレクトリとファイルが作成されます。

任意のディレクトリ/
├── node_modules/
├── package-lock.json
└── package.json

重曹なファイル

Bootstrapで必要なファイルについては下記の2ファイルになります。

bootstrap.bundle.min.js
bootstrap.min.css

これらは node_modules ディレクトリ配下に存在します。

node_modules/bootstrap/dist/js/bootstrap.bundle.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css

ミニファイドファイル

.minファイルは余計なものが含まれないファイルの事で、.minが付かないファイルより軽量です。なので、特に理由がなければ.minファイルを使用します。余計なものとは、コメントやスペース、改行などです。

バンドルファイル

bootstrap.bundle.min.js は Popper.js を含んでいます。
Bootstrapのツールチップやポップオーバーを使用するには Popper.js が必要のようです。
bootstrap.bundle.min.js は bootstrap本体に他のパッケージが包括されているファイルと言うイメージです。

bootstrapの確認

実際にbootstrapを読み込んで使用します。

なお、jsディレクトリ、cssディレクトリを作成し、各bootstrapファイルを以下に移動しました。

任意のディレクトリ/
├── js/jsbootstrap.bundle.min.js
└── css/bootstrap.min.css

bootstrapを使用する為のindex.htmlを作成しました。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

index.htmlをブラウザで表示します。ボタンが青色になり、bootstrapのスタイルが割り当てられている事が確認出来ました。

最後に

何年かぶりにbootstrapを触りました。npmでのインストールに手こずりました。