ブートストラップとウェブパック
Webpack を使用してプロジェクトに Bootstrap の CSS と JavaScript を含めてバンドルする方法の公式ガイド。
設定
Bootstrap を使用して Webpack プロジェクトをゼロから構築しているため、実際に開始する前に、いくつかの前提条件と事前の手順があります。このガイドでは、Node.js がインストールされていて、ターミナルにある程度慣れている必要があります。
-
プロジェクト フォルダーを作成し、npm をセットアップします。フォルダーを作成
my-projectし、引数を使用して npm を初期化して、-yすべての対話型の質問を避けるようにします。mkdir my-project && cd my-project npm init -y -
ウェブパックをインストールします。次に、Webpack 開発依存関係をインストールする必要があります。これは
webpack、Webpack のコア用でありwebpack-cli、ターミナルから Webpack コマンドを実行webpack-dev-serverできるようにし、ローカル開発サーバーを実行できるようにします。--save-devこれらの依存関係は開発用のみであり、本番用ではないことを示すために使用します。npm i --save-dev webpack webpack-cli webpack-dev-server -
ブートストラップをインストールします。これで、Bootstrap をインストールできます。ドロップダウン、ポップオーバー、およびツールチップの配置は Popper に依存しているため、Popper もインストールします。これらのコンポーネントを使用する予定がない場合は、ここで Popper を省略できます。
npm i --save bootstrap @popperjs/core -
追加の依存関係をインストールします。Webpack と Bootstrap に加えて、Bootstrap の CSS と JS を適切にインポートして Webpack にバンドルするには、さらにいくつかの依存関係が必要です。これらには、Sass、一部のローダー、Autoprefixer が含まれます。
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
必要な依存関係がすべてインストールされたので、プロジェクト ファイルの作成と Bootstrap のインポートに取り掛かることができます。
プロジェクトの構造
既にフォルダーを作成し、my-projectnpm を初期化しています。ここで、プロジェクト構造を完成させるために、フォルダーsrcとdistフォルダーも作成します。から次を実行するか、以下my-projectに示すフォルダとファイル構造を手動で作成します。
mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
完了すると、完全なプロジェクトは次のようになります。
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js
この時点で、すべてが適切な場所にありますが、まだ入力していないため、Webpack は機能しwebpack.config.jsません。
Webpack を構成する
依存関係がインストールされ、プロジェクト フォルダーがコーディングを開始する準備ができたので、Webpack を構成してプロジェクトをローカルで実行できます。
-
webpack.config.jsエディターで開きます。空白なので、サーバーを起動できるようにボイラープレート構成を追加する必要があります。構成のこの部分は、Webpack がプロジェクトの JavaScript を検索すること、コンパイルされたコードを (dist) に出力する場所、および開発サーバーがどのように動作するか (distホット リロードでフォルダーからプルする) を指示します。const path = require('path') module.exports = { entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true } } -
次に、 を入力します
dist/index.html。これは、バンドルされた CSS と JS を利用するために Webpack がブラウザーにロードする HTML ページであり、後のステップで追加します。それを行う前に、レンダリングするものを与えてoutput、前のステップの JS を含める必要があります。<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Webpack</title> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Webpack!</h1> <button class="btn btn-primary">Primary button</button> </div> <script src="./main.js"></script> </body> </html>Bootstrap の CSS が Webpack によって読み込まれるタイミングを確認できるように、
div class="container"and を使用してここに Bootstrap のスタイリングを少し含めています。<button> -
次に、Webpack を実行するための npm スクリプトが必要です。以下に示すスクリプトを開い
package.jsonて追加しstartます (テスト スクリプトは既にあるはずです)。このスクリプトを使用して、ローカルの Webpack dev サーバーを起動します。{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } -
最後に、Webpack を起動します。ターミナルの
my-projectフォルダーから、新しく追加された npm スクリプトを実行します。npm start
このガイドの次の最後のセクションでは、Webpack ローダーをセットアップし、Bootstrap の CSS と JavaScript をすべてインポートします。
ブートストラップのインポート
Bootstrap を Webpack にインポートするには、最初のセクションでインストールしたローダーが必要です。npm でインストールしましたが、Webpack を使用するように構成する必要があります。
-
でローダーをセットアップし
webpack.config.jsます。これで構成ファイルが完成し、以下のスニペットと一致するはずです。ここでの唯一の新しい部分はmoduleセクションです。const path = require('path') module.exports = { entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true }, module: { rules: [ { test: /\.(scss)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: () => [ require('autoprefixer') ] } } }, { loader: 'sass-loader' } ] } ] } }これらすべてのローダーが必要な理由の要約を次に示します。HTML ページの要素に
style-loaderCSS を挿入し、と の使用を支援し、Autoprefixer に必要であり、Sassを使用できるようにします。<style><head>css-loader@importurl()postcss-loadersass-loader -
では、Bootstrap の CSS をインポートしてみましょう。に以下を追加して
src/scss/styles.scss、Bootstrap のソース Sass をすべてインポートします。// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";必要に応じて、スタイルシートを個別にインポートすることもできます。詳細については、Sass インポート ドキュメントを参照してください。
-
次に CSS をロードし、Bootstrap の JavaScript をインポートします。以下を に追加して
src/js/main.js、CSS をロードし、Bootstrap の JS をすべてインポートします。Popper は Bootstrap を通じて自動的にインポートされます。// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'バンドルのサイズを抑えるために、必要に応じて JavaScript プラグインを個別にインポートすることもできます。
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'Bootstrap のプラグインの使用方法の詳細については、JavaScript ドキュメントをお読みください。
-
そして、あなたは完了です！🎉 Bootstrap のソース Sass と JS が完全に読み込まれると、ローカル開発サーバーは次のようになります。
これで、使用したい Bootstrap コンポーネントの追加を開始できます。追加のカスタム Sass を組み込み、Bootstrap の CSS と JS の必要な部分のみをインポートしてビルドを最適化する方法については、完全な Webpack サンプル プロジェクトを確認してください。
生産の最適化
セットアップによっては、プロジェクトを本番環境で実行するのに役立つ追加のセキュリティと速度の最適化を実装したい場合があります。これらの最適化はWebpack サンプル プロジェクトには適用されず、実装はユーザー次第であることに注意してください。
CSS の抽出
上記style-loaderで構成した は、CSS ファイルを手動でロードする必要がないように、バンドルに CSS を便利に発行しますdist/index.html。ただし、このアプローチは厳密なコンテンツ セキュリティ ポリシーでは機能しない可能性があり、バンドル サイズが大きいため、アプリケーションのボトルネックになる可能性があります。
から直接ロードできるように CSS を分離するには、 Webpack プラグインdist/index.htmlを使用します。mini-css-extract-loader
まず、プラグインをインストールします。
npm install --save-dev mini-css-extract-plugin
次に、Webpack 構成でプラグインをインスタンス化して使用します。
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/js/main.js',
+ plugins: [new miniCssExtractPlugin()],
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
test: /\.(scss)$/,
use: [
{
- // Adds CSS to the DOM by injecting a `<style>` tag
- loader: 'style-loader'
+ // Extracts CSS for each JS file that includes CSS
+ loader: miniCssExtractPlugin.loader
},
{
再度実行すると、 によってインポートされたすべての CSS を含むnpm run build新しいファイルが作成されます。現在ブラウザで表示すると、現在 にあるため、スタイルが表示されません。生成された CSS を次のように含めることができます。dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/index.html
--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="./main.css">
<title>Bootstrap w/ Webpack</title>
</head>
<body>
SVG ファイルの抽出
Bootstrap の CSS には、インラインdata:URI を介した SVG ファイルへの複数の参照が含まれています。data:画像の URI をブロックするコンテンツ セキュリティ ポリシーをプロジェクトに定義すると、これらの SVG ファイルは読み込まれません。この問題は、Webpack のアセット モジュール機能を使用してインライン SVG ファイルを抽出することで回避できます。
次のようにインライン SVG ファイルを抽出するように Webpack を構成します。
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
},
module: {
rules: [
+ {
+ mimetype: 'image/svg+xml',
+ scheme: 'data',
+ type: 'asset/resource',
+ generator: {
+ filename: 'icons/[hash].svg'
+ }
+ },
{
test: /\.(scss)$/,
use: [
再度実行すると、SVG ファイルが CSS に抽出され、CSS から適切に参照npm run buildされていることがわかります。dist/icons
ここで何か間違っている、または古くなっていますか？GitHub で問題を開いてください。トラブルシューティングのヘルプが必要ですか? GitHub で検索するか、ディスカッションを開始します。