• HOME
• HTML/CSS
• Bootstrap
• webpackでBootstrapをまとめる

webpackでBootstrapをまとめる

Tweet

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

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にローダーを追加します。

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>

参考

• 最新版で学ぶwebpack 5入門 Bootstrapをバンドルする方法
• How to use Fonts with Webpack 5 - Setup Tutorial

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の場合と同じです。

Tweet

前の記事

CakePHPにBootstrapを適用する

次の記事

Bootstrapバリデーション機能の使い方