Victor Leung
Victor Leung
BlogAI SolutionAlphaAlgoFlower shopFX CombineIEESushi ClassifierWealth Agile

How to use Webpack with React and Bootstrap

March 06, 2016

I was setting up a project today using Webpack, React and Bootstrap without jQuery. This supposed to be a straight forward task , but turns out I have spent a bit of time to figure it out. So I’m going to document the steps as shown below:

Firstly, install all dependencies:

    npm install react react-dom bootstrap react-bootstrap babel-preset-react --save

    npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

Then, add the loaders in your webpack.conf.js:

    var path = require('path');
    var webpack = require('webpack');

    module.exports = {
      entry: './main.js',
      output: { path: __dirname, filename: 'bundle.js' },
      module: {
        loaders: [
          {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['es2015', 'react']
            }
          },
          {
            test: /.css$/,
            loader: "style-loader!css-loader"
          },
          {
            test: /.png$/,
            loader: "url-loader?limit=100000"
          },
          {
            test: /.jpg$/,
            loader: "file-loader"
          },
          {
            test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
            loader: 'url?limit=10000&mimetype=application/font-woff'
          },
          {
            test: /.ttf(?v=d+.d+.d+)?$/,
            loader: 'url?limit=10000&mimetype=application/octet-stream'
          },
          {
            test: /.eot(?v=d+.d+.d+)?$/,
            loader: 'file'
          },
          {
            test: /.svg(?v=d+.d+.d+)?$/,
            loader: 'url?limit=10000&mimetype=image/svg+xml'
          }
        ]
      },
    };

Next, in your main.js (or whatever your entry file), import Bootstrap css:

    import App from './app.jsx';
    import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

Finally, in your app.jsx, import react bootstrap:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Button } from 'react-bootstrap';

    const buttonsInstance = (
      <Button>Click me!</Button>
    );

    ReactDOM.render(buttonsInstance, document.getElementById('here'));

Not to mention you also need the div with this id as well as the bundle.js:

    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
      </head>
      <body>

    [http://bundle.js](http://bundle.js)
      </body>
    </html>

That’s is it! Let me know if you have any questions.


About Victor Leung

Software development professional with expertise in application architecture, cloud solutions deployment, and financial products development. Possess a Master's degree in Computer Science and an MBA in Finance. Highly skilled in AWS (Certified Solutions Architect, Developer and SysOps Administrator), GCP (Professional Cloud Architect), Microsoft Azure, Kubernetes(CKA, CKAD, CKS, KCNA), and Scrum(PSM, PSPO) methodologies.

Happy to connect
LinkedIn
Github
Twitter
@victorleungtw

Continuous improvement

Copyright © victorleungtw.com 2023.