1.0.0 • Published 7 years ago
webpack-bootstrap-installer v1.0.0
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"
]