Web Design Leaves

mySite
├── assets  //開発用フォルダ（Bootstrap 5 をインストール）
│   └── src
│       ├── custom.scss  // Sass ファイル（Bootstrap のスタイルをカスタマイズ）
│       ├── images // custom.scss で使用する背景画像を配置するフォルダ（必要に応じて）
│       └── index.js  //Javascript ファイル（エントリポイント）
├── images // 画像を配置するフォルダ（必要に応じて）
└── index.html //表示確認用 HTML ファイル

$ cd /Applications/MAMP/htdocs/mySite/assets  return

$ npm init -y  return

Wrote to /Applications/MAMP/htdocs/mySite/assets/package.json:
//以下の内容の package.json が上記パスに生成されます
{
  "name": "assets",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

mySite
├── assets
│   ├── package.json //生成された package.json
│   └── src
│       ├── custom.scss
│       ├── images //空のフォルダ（必要に応じて配置）
│       └── index.js
├── images //空のフォルダ（必要に応じて配置）
└── index.html

{
  "name": "assets",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ npm i -D webpack webpack-cli css-loader sass sass-loader mini-css-extract-plugin  return

added 166 packages, and audited 167 packages in 30s

$ npm i -D babel-loader @babel/core @babel/preset-env postcss-loader postcss postcss-preset-env  return

added 213 packages, and audited 380 packages in 10s

$ npm install bootstrap  return

added 2 packages, and audited 382 packages in 2s

mySite
├── assets
│   ├── node_modules  //npm でインストールされたパッケージのディレクトリ
│   │   ├── ＠babel
│   │   ├── ＠discoveryjs
│   │   ├── ＠popperjs
│   │   ├── ＠types
│   │   ├── ＠webassemblyjs
│   │   ├── ＠webpack-cli
│   │    ・・・中略・・・
│   │   ├── bootstrap
│   │    ・・・中略・・・
│   │   ├── webpack
│   │   ├── webpack-cli
│   │   ├── webpack-merge
│   │   ├── webpack-sources
│   │   ├── which
│   │   ├── wildcard
│   │   ├── yallist
│   │   └── yaml
│   ├── package-lock.json
│   ├── package.json
│   └── src
│       ├── custom.scss
│       ├── images（空）
│       └── index.js
├── images（空）
└── index.html 

{
  "name": "assets",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "mini-css-extract-plugin": "^2.4.6",
    "postcss": "^8.4.5",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.2.0",
    "sass": "^1.46.0",
    "sass-loader": "^12.4.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }
}

mySite
├── assets
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images（空）
│   │   └── index.js
│   └── webpack.config.js  // webpack 設定ファイルを追加
├── images（空）
└── index.html 

//path モジュールの読み込み
const path = require('path');
//MiniCssExtractPlugin の読み込み
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//変数 devMode は production モードの場合は false でその他の場合は true
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {

  //エントリポイント（デフォルトと同じなので省略可）
  entry: './src/index.js',
  //出力先
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    //ファイルを出力する前にディレクトリをクリーンアップ
    clean: true,
    //Asset Modules の出力先の指定
    assetModuleFilename: 'images/[name][ext][query]'
  },
  module: {
    rules: [
      //SASS 及び CSS 用のローダー
      {
        //拡張子 .scss、.sass、css を対象
        test: /\.(scss|sass|css)$/i,
        // 使用するローダーの指定
        use: [
          //CSS を別ファイルとして出力するプラグインのローダー
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          // PostCSS ローダーの設定
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      //必要に応じて postcss-preset-env のオプションを指定
                    },
                  ],
                ],
              },
            },
          },
          //Sass ローダー
          'sass-loader',
        ],
      },
      // Babel 用のローダー（Babel を使用しない場合は58〜78行目の部分は不要）
      {
        // ローダーの処理対象ファイル（拡張子 .js のファイルを対象）
        test: /\.js$/,
        // ローダーの処理対象から外すディレクトリ
        exclude: /node_modules/,
        // 処理対象のファイルに使用するローダーやオプションを指定
        use: [
          {
            // 利用するローダーを指定
            loader: 'babel-loader',
            // ローダー（babel-loader）のオプションを指定
            options: {
              // プリセットを指定
              presets: [
                // targets を指定していないので、一律に ES5 の構文に変換
                '@babel/preset-env',
              ]
            }
          }
        ]
      },
      //Asset Modules の設定
      {
        //対象とするアセットファイルの拡張子を正規表現で指定
        test: /\.(png|svg|jpe?g|gif)$/i,
        //画像をコピーして出力
        type: 'asset/resource'
      },
    ],
  },
  //プラグインの設定
  plugins: [
    new MiniCssExtractPlugin({
      // 抽出する CSS のファイル名
      filename: 'style.css',
    }),
  ],
  //production モード以外の場合は source-map タイプのソースマップを出力
  devtool: devMode ? 'source-map' : 'eval',
  // node_modules を監視（watch）対象から除外
  watchOptions: {
    ignored: /node_modules/  //正規表現で指定
  },
};

"scripts": {
  "build": "NODE_ENV=production webpack --mode production",
  "dev": "webpack --mode development",
  "watch": "webpack --mode development --watch"
},

$ npm run dev  return  //development モード

> assets@1.0.0 dev
> webpack --mode development

asset main.js 304 KiB [emitted] (name: main) 1 related asset
asset style.css 207 KiB [emitted] (name: main) 1 related asset
Entrypoint main 512 KiB (578 KiB) = style.css 207 KiB main.js 304 KiB 2 auxiliary assets
orphan modules 550 KiB (javascript) 937 bytes (runtime) [orphan] 24 modules
runtime modules 937 bytes 4 modules
modules by path ./node_modules/@popperjs/core/lib/ 76.5 KiB
  modules by path ./node_modules/@popperjs/core/lib/dom-utils/＊.js 18.8 KiB 22 modules
  modules by path ./node_modules/@popperjs/core/lib/utils/＊.js 14.5 KiB 21 modules
  modules by path ./node_modules/@popperjs/core/lib/modifiers/＊.js 29.9 KiB 10 modules
  modules by path ./node_modules/@popperjs/core/lib/＊.js 13.3 KiB 5 modules
modules by path ./src/ 381 bytes (javascript) 207 KiB (css/mini-extract)
  ./src/index.js 331 bytes [built] [code generated]
  ./src/custom.scss 50 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/custom.scss 207 KiB [built] [code generated]
./node_modules/bootstrap/dist/js/bootstrap.js 145 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 5361 ms

mySite
├── assets
│   ├── dist //ビルドの出力先
│   │   ├── main.js  //バンドルされた JavaScript
│   │   ├── main.js.map
│   │   ├── style.css  //スタイルシート
│   │   └── style.css.map
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images（空）
│   │   └── index.js
│   └── webpack.config.js
├── images（空）
└── index.html 

$ npm run build  return  //production モード

> assets@1.0.0 build
> NODE_ENV=production webpack --mode production

asset main.js 211 KiB [compared for emit] [minimized] (name: main)
asset style.css 167 KiB [compared for emit] (name: main)
Entrypoint main [big] 378 KiB = style.css 167 KiB main.js 211 KiB
orphan modules 391 KiB (javascript) 937 bytes (runtime) [orphan] 84 modules
runtime modules 670 bytes 3 modules
cacheable modules 210 KiB (javascript) 167 KiB (css/mini-extract)
  ./src/index.js + 56 modules 210 KiB [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/custom.scss 167 KiB [built] [code generated]

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (378 KiB)
      style.css
      main.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

// Variables
// Variables should follow the `$component-state-property-size` formula for consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system

// scss-docs-start gray-color-variables
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;

・・・中略・・・

// Body
// Settings for the `<body>` element.

$body-bg: $white !default;  //例：この行をコピーして値を変更し、!default を削除
$body-color: $gray-900 !default;
$body-text-align: null !default;

・・・中略・・・

// Options
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:   true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;

・・・以下省略・・・

/*
Bootstrap の変数を上書きして Bootstrap のスタイルをカスタマイズ
*/

/*body の背景色（$body-bg: $white !default;）を変更
_variables.scss から変数と値をコピーし、値を変更して !default フラグを削除*/
$body-bg: #fefefe;

/* body の文字色（$body-color: $gray-900 !default;）を変更*/
$body-color: #777;

/*角丸設定（$enable-rounded: true !default;）を変更*/
$enable-rounded: false;

/* Bootstrap の読み込み （これより前で変数を設定して変更） */
@import "~bootstrap/scss/bootstrap.scss";

mySite
├── assets
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images
│   │   │   └── sample.jpg //custom.scss で背景画像に指定
│   │   └── index.js
│   └── webpack.config.js
├── images  // HTML から参照する画像
│   ├── carousel_1.png
│   ├── carousel_2.png
│   └── carousel_3.png
└── index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--  コンパイルされて出力された style.css の読み込み -->
<link rel="stylesheet" href="assets/dist/style.css">
<title>webpack5/Bootstrap5 サンプル</title>
</head>

<body>
<div class="container pt-5">
  <h1>webpack Sample</h1>
  <div class="py-3">
    <h2>Button Sample</h2>
    <!-- Bootstrap のボタンのサンプル -->
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
  </div>
  <!-- Bootstrap カルーセル（画像は mySite 直下の images に保存）-->
  <div id="carouselExampleControls" class="carousel slide mb-3" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/carousel_1.png" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="images/carousel_2.png" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="images/carousel_3.png" class="d-block w-100" alt="">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div>
    <!-- custom.scss で背景画像を指定した要素（画像は src/images に配置して dist/images にコピーされる） -->
    <p class="bg-img">sample</p>
  </div>
</div>
<!--  バンドルされて出力された main.js の読み込み -->
<script src="assets/dist/main.js"></script>
</body>
</html>

// 全ての Bootstrap の名前付きエクスポート（named export）をインポート
import * as bootstrap from 'bootstrap';

// スタイルシートを読み込む
import './custom.scss';

/*
Bootstrap の変数を以下で上書きして Bootstrap のスタイルを調整
Bootstrap の変数は node_modules/bootstrap/scss/_variables.scss を参照
*/

// body の背景色と文字色を上書き
$body-bg: #fefefe;
$body-color: #777;

//フォントを変更
$font-family-base: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, Verdana, Arial, sans-serif;

//角丸設定を上書き
$enable-rounded: false;

//$theme-colors の $light を上書き
$light: #ccc;

/* Bootstrap の読み込み */
@import "~bootstrap/scss/bootstrap.scss";

/* 以下は Bootstrap のスタイルとは関係ないスタイル */

#carouselExampleControls {
  max-width: 600px;
}

$p_color: lightblue;

p.bg-img {
  color: $p_color;
  /* 背景画像を指定（Asset Modules の設定により画像は dist/images にコピーされる） */
  background-image: url("./images/sample.jpg");
  height: 300px;
  line-height: 300px;
  text-align: center;
  max-width: 600px;
}

mySite
├── assets
│   ├── dist //ビルド出力先ディレクトリ
│   │   ├── images
│   │   │   └── sample.jpg //ビルド時にコピーされた背景画像
│   │   ├── main.js //バンドルされた JavaScript
│   │   └── style.css //Sass がコンパイルされて生成された CSS
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images
│   │   │   └── sample.jpg //custom.scss で背景画像に指定
│   │   └── index.js
│   └── webpack.config.js
├── images  // HTML から参照する画像
│   ├── carousel_1.png
│   ├── carousel_2.png
│   └── carousel_3.png
└── index.html

mySite
├── assets
│   ├── dist
│   │   ├── images
│   │   │   └── sample.jpg
│   │   ├── main.js
│   │   ├── main.js.map  //ソースマップファイル
│   │   ├── style.css
│   │   └── style.css.map  //ソースマップファイル
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images
│   │   │   └── sample.jpg
│   │   └── index.js
│   └── webpack.config.js
├── images
│   ├── carousel_1.png
│   ├── carousel_2.png
│   └── carousel_3.png
└── index.html

@charset "UTF-8";
/*
Bootstrap の変数を以下で上書きして Bootstrap のスタイルを調整
Bootstrap の変数は node_modules/bootstrap/scss/_variables.scss を参照
*/
/* Bootstrap の読み込み */
/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;

  ・・・中略・・・

  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Meiryo, メイリオ, Verdana, Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #777;
  --bs-body-bg: #fefefe;
}

・・・中略・・・

body {
  margin: 0;
  font-family: ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Meiryo, メイリオ, Verdana, Arial, sans-serif;
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  font-size: var(--bs-body-font-size);
  font-weight: 400;
  font-weight: var(--bs-body-font-weight);
  line-height: 1.5;
  line-height: var(--bs-body-line-height);
  color: #777;
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: #fefefe;
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

・・・中略・・・

abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

・・・中略・・・

/* 以下は Bootstrap のスタイルとは関係ないスタイル */
#carouselExampleControls {
  max-width: 600px;
}

p.bg-img {
  color: lightblue;
  background-image: url(images/sample.jpg);
  height: 300px;
  line-height: 300px;
  text-align: center;
  max-width: 600px;
}


/*# sourceMappingURL=style.css.map*/

// 全ての Bootstrap の名前付きエクスポート（named export）をインポート
import * as bootstrap from 'bootstrap';
//または const bootstrap = require('bootstrap');

・・・以下省略・・・

import * as bootstrap from 'bootstrap';

//ページ上のすべてのツールチップを初期化
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  //new bootstrap.Tooltip() でインスタンスを生成
  return new bootstrap.Tooltip(tooltipTriggerEl)
});

・・・以下省略・・・

import { Tooltip, Carousel} from 'bootstrap';

//または以下のように bootstrap/js/dist からインポートすることもできます
import  Tooltip from 'bootstrap/js/dist/tooltip';
import  Carousel from 'bootstrap/js/dist/carousel';

import { Tooltip, Carousel} from 'bootstrap';

//ページ上のすべてのツールチップを初期化
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  //new Tooltip() でインスタンスを生成
  return new Tooltip(tooltipTriggerEl)
});

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--  コンパイルされて出力された dist/style.css の読み込み -->
<link rel="stylesheet" href="assets/dist/style.css">
<title>webpack5/Bootstrap5 サンプル</title>
</head>
<body>
<div class="container pt-5">
  <h1>webpack Sample</h1>
  <div class="py-3">
    <!-- Tooltip のサンプル -->
    <button type="button" class="btn btn-secondary mb-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
      Tooltip on top
    </button>

   ・・・中略・・・

</div>
<!--  コンパイルされて出力された dist/main.js の読み込み -->
<script src="assets/dist/main.js"></script>
</body>
</html>

$ npm install -D webpack-dev-server  return

added 187 packages, and audited 569 packages in 29s

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "NODE_ENV=production webpack --mode production",
  "dev": "webpack --mode development",
  "watch": "webpack --mode development --watch",
  "start": "webpack serve --mode development"
},

devServer: {
    //表示する静的ファイルのディレクトリを指定
    static: {
      //対象のディレクトリを指定
      directory: path.join(__dirname, '../'),
    },
    // または static: '../',
    //サーバー起動時にブラウザを自動的に起動
    open: true,
    // ポート番号をデフォルトの 8080 から 3000 に変更
    port: 3000,
    //webpack-dev-middleware 関連の設定
    devMiddleware: {
      writeToDisk: true, //バンドルされたファイルを出力する（実際に書き出す）
    },
  },

$ npm start  return

> assets@1.0.0 start
> webpack serve --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.11.2:3000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/Applications/MAMP/htdocs/mySite/' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
asset main.js 523 KiB [emitted] (name: main) 1 related asset
asset style.css 236 KiB [emitted] (name: main) 1 related asset
asset images/sample.jpg 192 KiB [emitted] [from: src/images/sample.jpg] (auxiliary name: main)
Entrypoint main 759 KiB (1.02 MiB) = style.css 236 KiB main.js 523 KiB 3 auxiliary assets
orphan modules 595 KiB (javascript) 192 KiB (asset) 12.8 KiB (runtime) [orphan] 29 modules
runtime modules 29.9 KiB 14 modules
modules by path ./node_modules/ 379 KiB
  modules by path ./node_modules/@popperjs/core/lib/ 76.5 KiB 58 modules
  modules by path ./node_modules/webpack-dev-server/client/ 56.8 KiB 12 modules
  modules by path ./node_modules/webpack/hot/＊.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/＊.js 81.3 KiB 4 modules
  modules by path ./node_modules/mini-css-extract-plugin/dist/hmr/＊.js 5.16 KiB 2 modules
  ./node_modules/bootstrap/dist/js/bootstrap.esm.js 136 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./src/ 845 bytes (javascript) 235 KiB (css/mini-extract)
  ./src/index.js 485 bytes [built] [code generated]
  ./src/custom.scss 360 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/custom.scss 235 KiB [built] [code generated]
webpack 5.65.0 compiled successfully in 5371 ms

$ npx webpack serve --mode development  return 

mySite
├── assets
│   ├── dist //ビルド出力先ディレクトリ（サーバーへアップロード）
│   │   ├── images
│   │   │   └── sample.jpg //ビルド時にコピーされた背景画像
│   │   ├── main.js //バンドルされた JavaScript
│   │   └── style.css //Sass がコンパイルされて生成された CSS
│   ├── node_modules
│   │   ├── ＠babel
│   │   ├── ＠discoveryjs
│   │   ├── ＠nodelib
│   │   ├── ＠popperjs
│   │    ・・・中略・・・
│   │   ├── webpack
│   │   ├── webpack-cli
│   │   ├── webpack-dev-middleware
│   │   ├── webpack-dev-server
│   │   ├── webpack-merge
│   │   ├── webpack-sources
│   │   ├── websocket-driver
│   │   ├── websocket-extensions
│   │   ├── which
│   │   ├── wildcard
│   │   ├── wrappy
│   │   ├── ws
│   │   ├── yallist
│   │   └── yaml
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images
│   │   │   └── sample.jpg //custom.scss で背景画像に指定
│   │   └── index.js
│   └── webpack.config.js
├── images  // HTML から参照する画像  （サーバーへアップロード）
│   ├── carousel_1.png
│   ├── carousel_2.png
│   └── carousel_3.png
└── index.html（サーバーへアップロード）

mySite
├── assets
│   └── dist //ビルド出力先ディレクトリ
│        ├── images
│        │   └── sample.jpg //ビルド時にコピーされた背景画像
│        ├── main.js //バンドルされた JavaScript
│        └── style.css //Sass がコンパイルされて生成された CSS
├── images  // HTML から参照する画像
│   ├── carousel_1.png
│   ├── carousel_2.png
│   └── carousel_3.png
└── index.html

mySite
├── assets
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   └── index.js
│   └── webpack.config.js
├── images
│   ├── carousel_1.png
│   ├── carousel_2.png
│   ├── carousel_3.png
│   └── sample.jpg //custom.scss で背景画像に指定
└── index.html

// Bootstrap の JavaScript をインポート
import * as bootstrap from 'bootstrap';

// カスタマイズ用のスタイルシートのインポート
import './custom.scss';

/*
Bootstrap の変数を上書きして Bootstrap のスタイルをカスタマイズ
*/
$body-bg: #fefefe;
$body-color: #777;
$font-family-base: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, Verdana, Arial, sans-serif;
$enable-rounded: false;

/* Bootstrap の読み込み */
@import "~bootstrap/scss/bootstrap.scss";

/* 以下は Bootstrap とは関係ないスタイル */

p.bg-img {
  color: lightblue;
  /* 背景画像を指定（ビルド時にコピーしない→パスも書き換えられない） */
  background-image: url("../../images/sample.jpg");
  height: 300px;
  line-height: 300px;
  text-align: center;
  max-width: 600px;
}

#carouselExampleControls {
  max-width: 600px;
}

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--  コンパイルされて出力された style.css の読み込み -->
<link rel="stylesheet" href="assets/dist/style.css">
<title>webpack5/Bootstrap5 サンプル</title>
</head>

<body>
<div class="container pt-5">
  <h1>webpack Sample</h1>
  <!-- Bootstrap カルーセル（画像は mySite 直下の images に保存）-->
  <div id="carouselExampleControls" class="carousel slide mb-3" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/carousel_1.png" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="images/carousel_2.png" class="d-block w-100" alt="">
      </div>
      <div class="carousel-item">
        <img src="images/carousel_3.png" class="d-block w-100" alt="">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div>
    <!-- custom.scss で背景画像を指定（画像は mySite 直下の images に保存） -->
    <p class="bg-img">sample</p>
  </div>
</div>
<!--  バンドルされて出力された main.js の読み込み -->
<script src="assets/dist/main.js"></script>
</body>
</html>

{
  loader: "css-loader",
  options: {
    url: false, //URL の解決を無効に
    importLoaders: 2,
  },
},

mySite
├── assets
│   ├── dist
│   │   ├── main.js
│   │   └── style.css  //background-image はサイト直下の images を参照
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   └── index.js
│   └── webpack.config.js
├── images
│   ├── carousel_1.png
│   ├── carousel_2.png
│   ├── carousel_3.png
│   └── sample.jpg  //custom.scss で背景画像に指定（style.css で参照）
└── index.html

mySite
├── assets
│   ├── dist //ビルド出力先ディレクトリ
│   │   ├── images
│   │   ├── main.js //バンドルされた JavaScript
│   │   └── style.css //Sass がコンパイルされて生成された CSS
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images  // custom.scss から参照する画像のフォルダ
│   │   └── index.js
│   └── webpack.config.js
├── images  // index.html から参照する画像のフォルダ
└── index.html

$ npm i bootstrap-icons  return

added 1 package, and audited 570 packages in 2s

{
  "name": "assets",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production webpack --mode production",
    "dev": "webpack --mode development",
    "watch": "webpack --mode development --watch",
    "start": "webpack serve --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "mini-css-extract-plugin": "^2.4.6",
    "postcss": "^8.4.5",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.2.0",
    "sass": "^1.46.0",
    "sass-loader": "^12.4.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.2"
  }
}

bootstrap-icons
    ├── LICENSE.md
    ├── README.md
    ├── bootstrap-icons.svg
    ├── font
    │   ├── bootstrap-icons.css  //アイコンフォントの CSS
    │   ├── bootstrap-icons.json
    │   ├── bootstrap-icons.scss
    │   ├── fonts
    │   │   ├── bootstrap-icons.woff  //フォントファイル
    │   │   └── bootstrap-icons.woff2  //フォントファイル
    │   └── index.html
    └── package.json

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"),
url("./fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff");
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-123::before { content: "\f67f"; }
.bi-alarm-fill::before { content: "\f101"; }
.bi-alarm::before { content: "\f102"; }
.bi-align-bottom::before { content: "\f103"; }
・・・以下省略・・・

//Asset Modules の設定（フォントファイル）
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i, //対象とするフォントファイルの拡張子
  type: 'asset/resource', // フォントをコピーして以下の出力先に出力
  generator: {
    //出力先を指定（fonts フォルダにファイル名と拡張子で出力）
    filename: 'fonts/[name][ext][query]'
  }
},

// Bootstrap の JavaScript をインポート
import * as bootstrap from 'bootstrap';

// Bootstrap Icons の CSS をインポート（追加）
import 'bootstrap-icons/font/bootstrap-icons.css';

// カスタマイズ用のスタイルシートのインポート
import './custom.scss';

$ npm run dev  return

> assets@1.0.0 dev
> webpack --mode development

assets by chunk 581 KiB (name: main)
  asset main.js 296 KiB [compared for emit] (name: main) 1 related asset
  asset style.css 284 KiB [emitted] (name: main) 1 related asset
assets by path fonts/ 210 KiB
  asset fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d 120 KiB [emitted] [from: node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d] (auxiliary name: main)
  asset fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d 89.9 KiB [emitted] [from: node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d] (auxiliary name: main)
Entrypoint main 581 KiB (890 KiB) = style.css 284 KiB main.js 296 KiB 4 auxiliary assets
orphan modules 757 KiB (javascript) 210 KiB (asset) 1.02 KiB (runtime) [orphan] 28 modules
runtime modules 1.57 KiB 7 modules
・・・以下省略・・・

mySite
├── assets
│   ├── dist
│   │   ├── fonts
│   │   │   ├── bootstrap-icons.woff  //コピーされたフォントファイル
│   │   │   └── bootstrap-icons.woff2  //コピーされたフォントファイル
│   │   ├── main.js
│   │   └── style.css
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── custom.scss
│   │   ├── images
│   │   └── index.js
│   └── webpack.config.js
├── images
└── index.html

@font-face {
  font-family: "bootstrap-icons";
  src: url(fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d) format("woff2"), url(fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d) format("woff");
}
.bi::before,
[class^=bi-]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bi-123::before {
  content: "\f67f";
}

.bi-alarm-fill::before {
  content: "\f101";
}

.bi-alarm::before {
  content: "\f102";
}

・・・以下省略・・・

<i class="bi-alarm"></i>

<p><i class="bi-alarm" style="font-size: 2rem; color: red;"></i> Bootstrap Icon</p>