webpackでBootstrapをまとめる

Bootstrapを使う場合、複数のファイルを読み込んだり、jQueryを別で読み込んだりと依存関係が面倒です。(僕だけ?)webpackを使えばこれらを1ファイルにまとめることができます。

Bootstrap4.5の場合

Bootstrapのバージョンが4.5の場合の手順です。記事作成時の各バージョンは次の通り。

  • webpack 5.10.1
  • bootstrap 4.5.3

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

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

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

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

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

npm install bootstrap jquery popper.js

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

npm install bootstrap@4.5.3

Bootstrapをwebpackでまとめる手順

  1. カレントフォルダに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",
            ]
          },
        ]
      },
    };
    
  2. 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';
    
  3. カレントフォルダでnpx webpackコマンドを使ってビルドする
    npx webpack
    

dist/main.js が作成されます。

使い方

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

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

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>

参考

Bootstrap5.0の場合

Bootstrapのバージョンが5.0の場合の手順です。記事作成時の各バージョンは次の通り。

  • webpack 5.71.0
  • webpack-cli 4.9.2
  • bootstrap 5.1.3
  • @popperjs/core 2.11.4
  • bootstrap-icons 1.8.1
  • css-loader 6.7.1
  • style-loader 3.3.1

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

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

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

npm install bootstrap
npm install @popperjs/core

Bootstrap Iconsのインストール

npm install bootstrap-icons

Bootstrapをwebpackでまとめる手順

  1. カレントフォルダに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",
                    ]
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    type: "asset/inline"
                },
            ],
        },
    };
    
  2. srcフォルダを作成し、index.jsを作成する
    src/index.js
    // Bootstrap のスタイルシート.
    import 'bootstrap/dist/css/bootstrap.min.css';
    
    // Bootstrap の JavaScript. 以下のいづれかを使う.
    // 全て.
    import * as bootstrap from 'bootstrap';
    // 必要なプラグインのみ1.
    import { Tooltip, Toast, Popover } from 'bootstrap';
    // 必要なプラグインのみ2.
    import Alert from 'bootstrap/js/dist/alert';
    
    // Bootstrap Icons のスタイルシート.
    import 'bootstrap-icons/font/bootstrap-icons.css';
    
  3. カレントフォルダでnpx webpackコマンドを使ってビルドする
    npx webpack
    

dist/main.js が作成されます。使い方はBootstrap4.5の場合と同じです。

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です