webpackでBootstrapをまとめる
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でまとめる手順
- カレントフォルダに
webpack.config.jsを作成する
最低限、次の内容があればOK
webpack.config.jsmodule.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 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でまとめる手順
- カレントフォルダに
webpack.config.jsを作成する
最低限、次の内容があればOK
webpack.config.jsmodule.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" }, ], }, }; 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';- カレントフォルダで
npx webpackコマンドを使ってビルドするnpx webpack
dist/main.js が作成されます。使い方はBootstrap4.5の場合と同じです。
