Bootstrap: Webpack 3 + Bootstrap 4 beta example project

Created on 14 Oct 2017  路  10Comments  路  Source: twbs/bootstrap

Hi,

Webpack documentation was not enough to help me get started. It would be great to add complete minimum project examples to get started. Here is Webpack 3 + Bootstrap 4 beta project as example to show what I mean: https://github.com/xdvarpunen/webpackboot

docs v4
Source
picture xdvarpunen
👍5

Most helpful comment

@XhmikosR See it this way:

Bootstrap 3 needs JQuery for JavaScript components and SASS/LESS compiler for .scss-files, if did not use .css files.

  • JavaScript components did not need separate code in order to get them working.
  • There was JQuery as dependency, but it was not used exactly in order to use Bootstrap JavaScript components.
  • SPA did not exist?
  • Webpack did not exist.

Bootstrap 4 needs JQuery and Popper.js for JavaScript components and SASS/LESS compiler for .scss-files, if did not use .css files. (It had Tether at one point of alpha).

  • JavaScript components need separate code in order to get them working
  • JQuery is used in example as tool for Bootstrap components
  • Webpack exists and needs knowledge of Bootstrap contents like globals (jquery, $, popperjs)

For webpack complete webpack.config.js and required imports on main JavaScript file in SPA or other JavaScript application would be fine (it's actually all that I ask). Pretty much this type of copy pastable complete example:

 # dependencies to install through npm
npm install --save [email protected] jquery popper.js
npm install --save-dev autoprefixer babel-core babel-loader babel-preset-es2015 css-loader extract-text-webpack-plugin node-sass postcss-loader precss sass-loader style-loader webpack 

// webpack.config.js
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')

const extractSass = new ExtractTextPlugin({
  filename: "styles.css",
});

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['es2015', { modules: false }]
            ]
          }
        }]
      },
      {
        test: /\.(scss)$/,
        use: extractSass.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: [{
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "sass-loader" // compiles Sass to CSS
          }]
        })
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery", // Used for Bootstrap JavaScript components
      jQuery: "jquery", // Used for Bootstrap JavaScript components
      Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components
    }),
    extractSass
  ]
};

// ./src/index.js
// Bootstrap dependencies
window.$ = window.jQuery = require('jquery') // required for bootstrap
window.Popper = require('popper.js') // required for tooltip, popup...
require('bootstrap')

import './index.scss' // include bootstrap css file with own modifications

// tooltip and popover require javascript side modification to enable them (new in Bootstrap 4)
// use tooltip and popover components everywhere
$(function (){
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

// Your code here....

/* ./src/_custom.scss
$body-bg:    $gray-900;
$body-color: $gray-600;

/* ./src/index.scss */
@import "~bootstrap/scss/bootstrap";
@import "custom";

<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="container">
    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
  </div>
  <script src="app.js"></script>
</body>

</html>

Indeed it is not your job to teach each tool, but that was not what was asked. What is asked is how to _get started without need to dig issues and source code_ and that is your job, right?

picture xdvarpunen on 15 Oct 2017
👍45 ❤13 🎉5 😄1

All 10 comments

@Johann-S: thoughts?

IMO it's not our job to teach how to use each tool.

XhmikosR picture XhmikosR on 15 Oct 2017
👎47 😕9

@XhmikosR See it this way:

Bootstrap 3 needs JQuery for JavaScript components and SASS/LESS compiler for .scss-files, if did not use .css files.

  • JavaScript components did not need separate code in order to get them working.
  • There was JQuery as dependency, but it was not used exactly in order to use Bootstrap JavaScript components.
  • SPA did not exist?
  • Webpack did not exist.

Bootstrap 4 needs JQuery and Popper.js for JavaScript components and SASS/LESS compiler for .scss-files, if did not use .css files. (It had Tether at one point of alpha).

  • JavaScript components need separate code in order to get them working
  • JQuery is used in example as tool for Bootstrap components
  • Webpack exists and needs knowledge of Bootstrap contents like globals (jquery, $, popperjs)

For webpack complete webpack.config.js and required imports on main JavaScript file in SPA or other JavaScript application would be fine (it's actually all that I ask). Pretty much this type of copy pastable complete example:

 # dependencies to install through npm
npm install --save [email protected] jquery popper.js
npm install --save-dev autoprefixer babel-core babel-loader babel-preset-es2015 css-loader extract-text-webpack-plugin node-sass postcss-loader precss sass-loader style-loader webpack 

// webpack.config.js
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')

const extractSass = new ExtractTextPlugin({
  filename: "styles.css",
});

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['es2015', { modules: false }]
            ]
          }
        }]
      },
      {
        test: /\.(scss)$/,
        use: extractSass.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: [{
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "sass-loader" // compiles Sass to CSS
          }]
        })
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery", // Used for Bootstrap JavaScript components
      jQuery: "jquery", // Used for Bootstrap JavaScript components
      Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components
    }),
    extractSass
  ]
};

// ./src/index.js
// Bootstrap dependencies
window.$ = window.jQuery = require('jquery') // required for bootstrap
window.Popper = require('popper.js') // required for tooltip, popup...
require('bootstrap')

import './index.scss' // include bootstrap css file with own modifications

// tooltip and popover require javascript side modification to enable them (new in Bootstrap 4)
// use tooltip and popover components everywhere
$(function (){
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

// Your code here....

/* ./src/_custom.scss
$body-bg:    $gray-900;
$body-color: $gray-600;

/* ./src/index.scss */
@import "~bootstrap/scss/bootstrap";
@import "custom";

<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="container">
    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
  </div>
  <script src="app.js"></script>
</body>

</html>

Indeed it is not your job to teach each tool, but that was not what was asked. What is asked is how to _get started without need to dig issues and source code_ and that is your job, right?

xdvarpunen picture xdvarpunen on 15 Oct 2017
👍45 ❤13 🎉5 😄1

I am using create-react-app, and don't have access to webpack config. I am including partial bootstrap components this way.

yarn add exports-loader

index.js

// jQuerySlim takes almost 25% of entire bundle :(
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
window.Popper = require('popper.js');

window.Util = require('exports-loader?Util!bootstrap/js/dist/util'); // eslint-disable-line
window.Dropdown = require('exports-loader?Dropdown!bootstrap/js/dist/dropdown'); // eslint-disable-line
window.Modal = require('exports-loader?Modal!bootstrap/js/dist/modal'); // eslint-disable-line

First I tried to include them from src folder, but UglifyJs outputs some errors. Does not happen if import from dist folder. Also including from src there is no need for Util import

And for sass I also include only partial components (check CRA official sass support)

index.scss

// BASE

@import "font-faces";
@import "bootstrap";
@import "../icons/style.css";


// BOOTSTRAP OVERRIDES

@import "resets";
@import "icons";
@import "helpers";
@import "layout";
...


// COMPONENTS

@import "components";


// CONTAINERS

@import "header";
@import "topcontent";
..

_bootstrap.scss

Know I could import ~bootstrap/..., but don't like IDE complaining

@import "../../node_modules/bootstrap/scss/functions";
@import "variables";
@import "added-vars";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
//@import "../../node_modules/bootstrap/scss/print";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
//@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/code";
@import "../../node_modules/bootstrap/scss/grid";
//@import "../../node_modules/bootstrap/scss/tables";
...
iamandrewluca picture iamandrewluca on 15 Oct 2017
👍1

Personnaly I would prefer an update of our documentation : https://getbootstrap.com/docs/4.0/getting-started/webpack/

Johann-S picture Johann-S on 15 Oct 2017

@Johann-S I'll fork and modify it =>

xdvarpunen picture xdvarpunen on 15 Oct 2017

If we need to update our docs, let's see issues and PRs for that rather than requesting an entire project for it. I'd be happy to see our docs refer to someone else's project, too. But otherwise, we won't be taking this on ourselves鈥攚e don't use webpack for maintain Bootstrap.

mdo picture mdo on 18 Oct 2017
👍2

Any suggestion about this error?
I was trying to use bootstrap js plugins individually.

ERROR in ./node_modules/bootstrap/js/src/dropdown.js
Module parse failed: Unexpected token (217:8)
You may need an appropriate loader to handle this file type.
|     _getConfig(config) {
|       config = {
|         ...this.constructor.Default,
|         ...$(this._element).data(),
|         ...config
 @ ./src/js/app.js 19:0-55
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/app.js
devKamrulcom picture devKamrulcom on 10 Feb 2018

@niceKamrul try to install exports-loader

artemsky picture artemsky on 10 Feb 2018

The problem was, "Babel loader has been disabled for files coming from node_modules" as descussed here.

devKamrulcom picture devKamrulcom on 11 Feb 2018

For others who come across this as I did while trying to set up Bootstrap 4 with Webpack, the method of requiring JQuery and Popper.js in the index.js file as described by @iamandrewluca significantly increases the bundle size if you are using all or most of the js plugins and css - in my own case it added about 160kb to the bundle size.

freelancewebdev picture freelancewebdev on 8 Mar 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

steve-32a picture steve-32a  路  3Comments
alvarotrigo picture alvarotrigo  路  3Comments
fohlsom picture fohlsom  路  3Comments
ghost picture ghost  路  3Comments
devdelimited picture devdelimited  路  3Comments