webpackでBootstrapをまとめる
Bootstrapを使う場合、複数のファイルを読み込んだり、jQueryを別で読み込んだりと依存関係が面倒です。(僕だけ？)webpackを使えばこれらを１ファイルにまとめることができます。
本記事作成時の各バージョンは次の通りです。
- webpack 5.10.1
- bootstrap 4.5.3
モジュールのインストール
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 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>
参考
スポンサードリンク
