webpack-bootstrap-installer
v1.0.0
Published
Install Bootstrap 3 with all necessary dependencies and loaders at once
Downloads
17
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
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"
]