webpack

Bootstrapのインストール（Installing Bootstrap）

npmを使用してNode.jsモジュールとして、Bootstrapをインストールする。

JavaScriptのインポート（Importing JavaScript）

次の行をアプリケーションのエントリーポイント（通常は index.js か app.js を使用）に追加して、BootstrapのJavaScriptをインポート：

import 'bootstrap';

また、必要に応じてプラグインを個別にインポートすることも可能：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

BootstrapはjQueryとPopperに依存している。これは peerDependencies プロパティで指定されており、npm install --save jquery popper.js を使用して、両方を package.json に追加する必要がある。

スタイルのインポート（Importing Styles）

コンパイル済みSassのインポート（Importing Precompiled Sass）

Bootstrapの可能性を最大限に活用し、ニーズに合わせてカスタマイズするには、プロジェクトのバンドルプロセスの一部としてソースファイルを使用。

まず、独自の _custom.scss を作成し、それを使用して組み込みカスタム変数を上書きする。次に、メインのSassファイルを使用してカスタム変数をインポートしてから、Bootstrapを実行：

@import "custom";
@import "~bootstrap/scss/bootstrap";

Bootstrapをコンパイルするには、必要なローダー（sass-loader, Autoprefixer付きpostcss-loader）をインストールして使用することを確認しておくこと。最小限の設定で、webpackの設定にこのルールか同様のものを組み込む必要がある：

...
{
	test: /.(scss)$/,
	use: [{
		loader: 'style-loader', // CSSをページに挿入
	}, {
		loader: 'css-loader', // CSSをCommonJSモジュールに変換
	}, {
		loader: 'postcss-loader', // ポストCSSアクションを実行
		options: {
			plugins: function () { // post cssプラグインは、postcss.config.jsにエクスポート可能
				return [
					require('precss'),
					require('autoprefixer')
				];
			}
		}
	}, {
		loader: 'sass-loader' // SassをCSSにコンパイル
	}]
},
... 

コンパイル済みCSSのインポート（Importing Compiled CSS）

または、プロジェクトのエントリーポイントに次の行を追加するだけで、Bootstrapで定義済みのCSSを使うことも可能：

import 'bootstrap/dist/css/bootstrap.min.css'; 

この場合、sass-loader にstyle-loaderとcss-loader だけを使用する必要がない場合を除いて、webpackの設定に特別な変更を加えることなく、既存の css ルールを使うことが可能。

JavaScript...
module: {
	rules: [
		{
			test: /\.css$/,
			use: ['style-loader', 'css-loader']
		}
	]
}
...