1.0.0 • Published 8 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"
]