# webpack-bootstrap-installer

> Install Bootstrap 3 with all necessary dependencies and loaders at once

Latest version **1.0.0** (published 2017-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-bootstrap-installer
pnpm add webpack-bootstrap-installer
yarn add webpack-bootstrap-installer
bun add webpack-bootstrap-installer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-06-13 |
| First published | 2017-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Pawel Rafalko |
| Maintainers | devrafalko |
| Keywords | webpack, bootstrap |

## Links

- npm: https://www.npmjs.com/package/webpack-bootstrap-installer
- npm.io page: https://npm.io/package/webpack-bootstrap-installer

## Dependencies (7)

- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [webpack](https://npm.io/package/webpack.md) ^2.5.1
- [bootstrap](https://npm.io/package/bootstrap.md) ^3.3.7
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.1
- [url-loader](https://npm.io/package/url-loader.md) ^0.5.8
- [file-loader](https://npm.io/package/file-loader.md) ^0.11.1
- [style-loader](https://npm.io/package/style-loader.md) ^0.17.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-06-13
- 0.1.2 — 2017-06-12
- 0.1.1 — 2017-05-15
- 0.1.0 — 2017-05-12

## README

### 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
```javascript
var path = require('path');

module.exports = {
  //webpack config
}
```

##### 2. Set output folders for fonts used by `Bootstrap`
The example of folders arrangement:
```javascript
	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**:

```javascript
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`

```javascript
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

```javascript
require('webpack-bootstrap-installer');
```

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

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

### Links

* [Bootstrap](http://getbootstrap.com/getting-started/)
* [Bootstrap npm](https://www.npmjs.com/package/bootstrap)
* [Glyphicons](http://glyphicons.com/)
* [jquery](http://jquery.com/download/)
* [jquery npm](https://www.npmjs.com/package/jquery)

### See also
* [webpack-icons-installer](https://www.npmjs.com/package/webpack-icons-installer)
* [webpack-jquery-ui](https://www.npmjs.com/package/webpack-jquery-ui)
* [webpack-css-loaders](https://www.npmjs.com/package/webpack-css-loaders)
* [webpack-sass-loaders](https://www.npmjs.com/package/webpack-sass-loaders)
* [webpack-babel-installer](https://www.npmjs.com/package/webpack-babel-installer)
* [webpack-karma-jasmine](https://www.npmjs.com/package/webpack-karma-jasmine)

---
_Source: https://npm.io/package/webpack-bootstrap-installer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._