Try #014 – Bootstrap4とwebpackを組み合わせたビルド環境を公開してみた

この記事は、「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で開発できますね!

参考文献
Bootstrap4
webpack