webpack を利用して bootstrap を使用します。
なお、webpack と bootstrap については解説を説明を割愛します。
初期処理
任意のディレクトリで下記コマンドを実行し、npmの初期化処理を行います。
npm init -y-y は package.json をデフォルトで作成します。
各種インストール
webpackのインストール
下記コマンドを実行し、webpackをインストールします。
npm i --save-dev webpack webpack-cli webpack-dev-server説明
あまり意識せずとも良いのですが、一応簡単に説明します。
webpack
webpack 本体です。
webpack-cli
webpack-cli はターミナルからwebpackのコマンドを実行する為のパッケージです。
webpack-dev-server
webpack-dev-server はローカルでwebサーバを立ち上げるパッケージです。
プラグインのインストール
下記コマンドを実行し、必要なプラグインをインストールします。
npm i --save-dev html-webpack-plugin説明
あまり意識せずとも良いのですが、一応簡単に説明します。
html-webpack-plugin
html-webpack-plugin はHTMLファイルをdistディレクトリ配下に生成するプラグインです。
bootstrapのインストール
bootstrapをインストールします。
npm i --save bootstrap @popperjs/core依存関係パッケージのインストール
下記のコマンドを実行して依存関係のパッケージをインストールします。
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loaderwebpackの設定
webpack.config.jsの作成
webpackの設定ファイルを作成します。
touch webpack.config.js内容は以下の通りです。
'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/js/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 8080,
hot: true
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' })
],
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
autoprefixer
]
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader',
options: {
sassOptions: {
// Silence Sass deprecation warnings
silenceDeprecations: [
'color-functions',
'global-builtin',
'import'
]
}
}
}
]
}
]
}
}説明
sass-loader
sass-loader webpackのビルド時に警告が発生するので、警告を無視するようにしています。
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader',
options: {
sassOptions: {
// Silence Sass deprecation warnings
silenceDeprecations: [
'color-functions',
'global-builtin',
'import'
]
}
}
}bootstrapのバンドル
bootstrapをバンドルする為の各種ファイルを作成します。
ディレクトリの作成
下記コマンドを実行し Bootstrap をバンドルする為のディレクトリを作成します。
mkdir {src,src/js,src/scss}各種ファイルの作成
main.js
main.js はbootstrapをバンドルする為のjsファイルになります。
下記のコマンドを実行し、main.jsを作成します。
touch src/js/main.js内容は以下の通りです。
// Import our custom CSS
import '../scss/styles.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'styles.scss
styles.css はbootstrapのcssをバンドルする為のscssファイルになります。
下記のコマンドを実行し、styles.scssを作成します。
touch src/scss/styles.scss内容は以下の通りです。
@import "bootstrap/scss/bootstrap";package.jsonの修正
package.jsonを修正します。
scripts
scripts の内容を以下のように修正します。
{
// ...
"scripts": {
"start": "webpack serve",
"build": "webpack build --mode=production",
"test": "npm run build"
},
// ...
}type
typeの記述を削除します。
"type": "commonjs"ブラウザに表示するHTML
ブラウザで表示する為のHTMLファイルを作成します。
touch src/index.html内容は以下の通りです。
<!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>
</body>
</html>実行
以下のコマンド実行するとwebサーバが起動します。
npm startブラウザでhttp://localhost:8080を表示します。以下が表示されるはずです。
