webpack-bootstrap-installer

Installation

This one package will let you use Bootstrap v3 (with all css components, js plugins and glyphicons provided by bootstrap) in your project. Use npm install webpack-bootstrap-installer instead of installing all dependencies and loaders separately.

The following dependencies will be installed:

Package name
bootstrap
jquery
css-loader
style-loader
file-loader
url-loader
webpack

Configuration

1. Require the path module in your webpack.config.js file

var path = require('path');
 
module.exports = {
  //webpack config
}

2. Set output folders for fonts used by Bootstrap

The example of folders arrangement:

    output:{
        path: path.join(__dirname,'public/assets/'),
        publicPath:'assets/'
    },

3. Set globals

Use the ProvidePlugin constructor in the plugins object of webpack.config.js file to inject jquery implicit globals:

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery'",
      "window.$": "jquery"
  })
]

4. Set loaders

Add the loaders to your webpack.config.js file to support Bootstrap

module: {
  rules: [
    {
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader",
      query:{
        limit:'10000',
        name:'[name].[ext]',
        outputPath:'fonts/'
        //the fonts will be emmited to public/assets/fonts/ folder
        //the fonts will be put in the DOM <style> tag as eg. @font-face{ src:url(assets/fonts/font.ttf); } 
      }
    },
    {
      test: /\.css$/,
      loaders: ["style-loader","css-loader"]
    }
  ]
}

Usage

To load Bootstrap use

require('webpack-bootstrap-installer');

or set the entry property in the webpack.config.js file:

entry: [
  "webpack-bootstrap-installer",
  "your-entry-point"
]

Links

• Bootstrap
• Bootstrap npm
• Glyphicons
• jquery
• jquery npm

See also

• webpack-icons-installer
• webpack-jquery-ui
• webpack-css-loaders
• webpack-sass-loaders
• webpack-babel-installer
• webpack-karma-jasmine