Webpack 3 + Bootstrap 4 beta example project #24370

xdvarpunen · 2017-10-14T00:00:22Z

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

XhmikosR · 2017-10-15T00:57:27Z

@Johann-S: thoughts?

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

xdvarpunen · 2017-10-15T03:46:13Z

@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?

iamandrewluca · 2017-10-15T06:59:11Z

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";
...

Johann-S · 2017-10-15T07:13:03Z

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

xdvarpunen · 2017-10-15T12:56:23Z

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

mdo · 2017-10-18T01:42:07Z

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—we don't use webpack for maintain Bootstrap.

kamrulcodes · 2018-02-10T17:02:34Z

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

artemsky · 2018-02-10T17:52:19Z

@niceKamrul try to install exports-loader

kamrulcodes · 2018-02-11T22:33:35Z

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

freelancewebdev · 2018-03-08T17:19:34Z

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.

Johann-S added docs v4 labels Oct 14, 2017

mdo closed this as completed Oct 18, 2017

Johann-S mentioned this issue Nov 3, 2017

Update our Webpack documentation for Webpack 3 #24656

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack 3 + Bootstrap 4 beta example project #24370

Webpack 3 + Bootstrap 4 beta example project #24370

xdvarpunen commented Oct 14, 2017

XhmikosR commented Oct 15, 2017

xdvarpunen commented Oct 15, 2017

iamandrewluca commented Oct 15, 2017 •

edited

Loading

Johann-S commented Oct 15, 2017

xdvarpunen commented Oct 15, 2017

mdo commented Oct 18, 2017

kamrulcodes commented Feb 10, 2018

artemsky commented Feb 10, 2018

kamrulcodes commented Feb 11, 2018 •

edited

Loading

freelancewebdev commented Mar 8, 2018

Webpack 3 + Bootstrap 4 beta example project #24370

Webpack 3 + Bootstrap 4 beta example project #24370

Comments

xdvarpunen commented Oct 14, 2017

XhmikosR commented Oct 15, 2017

xdvarpunen commented Oct 15, 2017

iamandrewluca commented Oct 15, 2017 • edited Loading

index.js

index.scss

_bootstrap.scss

Johann-S commented Oct 15, 2017

xdvarpunen commented Oct 15, 2017

mdo commented Oct 18, 2017

kamrulcodes commented Feb 10, 2018

artemsky commented Feb 10, 2018

kamrulcodes commented Feb 11, 2018 • edited Loading

freelancewebdev commented Mar 8, 2018

iamandrewluca commented Oct 15, 2017 •

edited

Loading

kamrulcodes commented Feb 11, 2018 •

edited

Loading