webpackでBootstrapをまとめる

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

  • 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
  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 5.0.0の場合

現在(2021.05.07)は、npm install bootstrapbootstrap 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>

参考

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

関連コンテンツ

スポンサードリンク

コメント

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