webpackでBootstrapをまとめる

2021.02.19 2021.07.07

Bootstrapを使う場合、複数のファイルを読み込んだり、jQueryを別で読み込んだりと依存関係が面倒です。(僕だけ？)webpackを使えばこれらを１ファイルにまとめることができます。
本記事作成時の各バージョンは次の通りです。

webpack 5.10.1
bootstrap 4.5.3

2021.05.08 bootstrap 5.0.0の場合を追記しました。

モジュールのインストール

webpack用モジュールのインストール

次のコマンドでwebpackとwebpackで使用するモジュールをインストールします。

npm install webpack webpack-cli style-loader css-loader

Bootstrap用モジュールのインストール

npm install bootstrap jquery popper.js

カレントフォルダにwebpack.config.jsを作成する
最低限、次の内容があればOK

webpack.config.js

module.exports = {
  // 開発中は development.
  // 本番では production にする.
  mode: "production",
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子.
        test: /\.css$/,
        use: [
          // スタイルシートをJSからlinkタグに展開する機能.
          "style-loader",
          // CSSをバンドルするための機能.
          "css-loader",
        ]
      },
    ]
  },
};

srcフォルダを作成し、index.jsを作成する
Bootstrap4.5では次のように記述する。メソッドを使うためにjQueryの記述が必要

src/index.js

// Bootstrap のスタイルシート.
import 'bootstrap/dist/css/bootstrap.min.css';

// jQuery を使えるようにする.
window.$ = window.jQuery = require('jquery/dist/jquery');

// Bootstrap の JavaScript.
import 'bootstrap';

カレントフォルダでnpx webpackコマンドを使ってビルドする
```
npx webpack
```

dist/main.js が作成されます。main.jsを任意のフォルダに配置し、<script>タグで読み込めばBootstrapが利用可能になります。

<script src="/js/main.js"></script>

bootstrap 5.0.0の場合

現在(2021.05.07)は、npm install bootstrapでbootstrap 5.0.0がインストールされます。その場合、追加で以下のインストールが必要です。

npm install @popperjs/core

bootstrap 4.5.3を使いたい場合は次のようにバージョンを指定します。

npm install bootstrap@4.5.3

また、bootstrap 5.0.0の場合は、src/index.jsを次のように変更します。

src/index.js

// Bootstrap のスタイルシート.
import 'bootstrap/dist/css/bootstrap.min.css';

// jQuery を使えるようにする.
window.$ = window.jQuery = require('jquery/dist/jquery');

// Bootstrap の JavaScript.
import { Tooltip, Toast, Popover } from 'bootstrap';
import Alert from 'bootstrap/js/dist/alert';

Bootstrap Iconsの追加

Bootstrap Iconsも追加してみましょう。バージョンは次のとおりです。

bootstrap-icons 1.3.0

必要モジュールのインストール

npm install bootstrap-icons
npm install url-loader

フォントのセットアップ

webpack.config.jsにローダーを追加します。

webpack.config.js

module.exports = {
  // 開発中は development.
  // 本番では production にする.
  mode: "production",
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子.
        test: /\.css$/,
        use: [
          // スタイルシートをJSからlinkタグに展開する機能.
          "style-loader",
          // CSSをバンドルするための機能.
          "css-loader",
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
};

index.jsの変更

src/index.jsにBootstrap Iconsのスタイルシートを追加する。

// Bootstrap Icons のスタイルシート.
import 'bootstrap-icons/font/bootstrap-icons.css';

カレントフォルダでnpx webpackコマンドを使ってビルドする

npx webpack

使用方法

次のようにアイコンフォントで利用できます。詳細はBootstrap Iconsを参照してください。

<i class="bi-alarm"></i>

参考

コメントコメントをキャンセル

Node.jsからJavaのAPIを使う

webpackを使ってNode.jsの実行ファイルをまとめる