画像


画像




画像




この記事は、「CSS Advent Calendar 2018」の1日目の記事です。




bootstrap4-starterという、Bootstrap4とwebpackを組み合わせたビルド環境を構築して公開しました。


各フレームワークをwebpackと組み合わせてビルド環境を構築する場合は、色々と手間がかかり挫折したかたもいると思います。Bootstrap3の時は、webpackと組み合わせるのが色々と面倒でした。




Bootstrap4とwebpackの組み合わせはスムーズにできました!




さっそく、bootstrap4-starterを動かす方法をご紹介。


ビルド環境

  • node v10.0.0
  • npm v6.4.1




パッケージインストール

npm install




これだけです!あとはbootstrap4のパーツを自由に配置してください!




ビルド

npm run build




開発用

npm run dev




ビルド後のサンプルです。


example




ビルド環境構築はこんな感じで構築しました。


package.json


{
"name": "bootstrap4-starter",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "Yasunori Kirimoto",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"css-loader": "^1.0.0",
"style-loader": "^0.23.1",
"bootstrap": "^4.1.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.3"
}
}




webpack.config.js


const webpack = require("webpack");

module.exports = {
mode: 'production',
entry: './_resouce/main.js',
output: {
path: __dirname + '/dist',
filename: 'app.js'
},
module: {
rules: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
devServer: {
contentBase: __dirname + '/dist',
publicPath: '/',
watchContentBase: true,
open: true
}
};




main.js


// CSS一式を読み込んでパッケージ
import 'bootstrap/dist/css/bootstrap.min.css';
// 独自CSS用ファイル
import "./css/style.css";

// JS一式を読み込んでパッケージ
import 'bootstrap';
// 独自JS用ファイル
import './js/script.js';




これで手軽にBootstrap4で開発できますね!









Q&A