CODEWITHSUNDEEP
javascripttwitter-bootstrapwebpack
user687554
user687554

Reputation: 11131

Using Bootstrap with Webpack

I have an app that uses Webpack. I'm new to Webpack and trying to learn how to use it effectively. Specifically, I'm trying to import Bootstrap with Font Awesome into my project. I found this SO post, however, I am still unable to use Bootstrap. I'm not sure if it's out-of-date, or if I'm misunderstanding something.

I tried loading Bootstrap and Font Awesome via the url-loader. I was referencing the following URLs: 

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

I also tried using loading Bootstrap and Font Awesome via NPM and then referencing it in my entry file like this:

require('bootstrap');
require('font-awesome');

It seems like this should be part of a commonly used template. However, I'm not finding one. How do I use Bootstrap and Font Awesome with Webpack?

However, I've come up short with that approach as well.

Upvotes: 3

Views: 5353

Answers (2)

Tripurari Shankar
Tripurari Shankar

Reputation: 3548

if you are not generating your base HTML file dynamically then you can symply include a <link> tag in your base html's head section (means same base html file everywhere)

and if you want to use it using webpack then along with url-loader you need to use either style-loader and css-loader (if you want to insert the style as style tag in head witch is probabbly not the case)

or you can use webpack's extract to text plugin to load as a different file and insert it using html link tag

for reference you can use this open source project's configration file

webpack production config

and

webpack developement config

edit: link update

Upvotes: 1

Stanislav Mayorov
Stanislav Mayorov

Reputation: 4452

I have created a simple example on GitHub. Webpack 2 and Bootstrap 3 are used.

Install dependency npm install jquery bootstrap

index.js

require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');
require('font-awesome/css/font-awesome.css'); //Optional. The question author uses this package.

webpack

const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "index.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [    
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                use: [{
                    loader: "file-loader"
                }]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('bundle.styles.css'),
        new webpack.ProvidePlugin({
            // inject ES5 modules as global vars
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

index.html

<link rel="stylesheet" type="text/css" href="/dist/bundle.styles.css">
<script type="text/javascript" src="/dist/bundle.js"></script>

You can use HtmlWebpackPlugin if don't want to insert bundle.styles.css and bundle.js manually.

Upvotes: 7

Related Questions