Awesome
Bower Webpack Plugin
Getting started
Install the plugin:
npm install --save-dev bower-webpack-plugin
Add the plugin to your Webpack configuration:
var BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
plugins: [new BowerWebpackPlugin()]
};
Configuration
The plugin takes options object as its single argument.
-
modulesDirectories
{string[]
orstring
} - the array of extra module directories, the plugin will look for bower components in. UnlesssearchResolveModulesDirectories
isfalse
, the plugin searches also for modules in directories defined atresolve.modulesDirectories
. -
manifestFiles
{string[]
orstring
} - the names of the bower manifest files. The plugin will try them in the order they are mentioned. The first matching will be used. -
includes
{RegExp[]
orRegExp
} - the plugin will match files contained in a manifest file, and will include only those which match any of the RegExp expressions. -
excludes
{RegExp[]
orRegExp
} - the plugin will match files contained in a manifest, and will exclude all files, which match any of the expressions. -
searchResolveModulesDirectories
{boolean
} - iffalse
, the plugin will not searchresolve.modulesDirectories
for bower components.
Using the plugin, without specifying the configuration is equivalent to following:
plugins: [
new BowerWebpackPlugin({
modulesDirectories: ["bower_components"],
manifestFiles: "bower.json",
includes: /.*/,
excludes: [],
searchResolveModulesDirectories: true
})
]
Usage
When the plugin is active, you can require bower modules using require
.
Example
This example shows how to use Twitter bootstrap installed by bower
in your project.
Make sure, you have bower installed. Create new project and install bower-webpack-plugin:
npm init
npm install --save-dev webpack file-loader style-loader css-loader bower-webpack-plugin
Install bootstrap bower component:
bower install bootstrap
Create an index.html
file:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
<div class="container-fluid main-page">
<div class="message-wrapper">
<div class="box">
<p class="lead">Press the button, to see if Bowerk Webpack Plugin works...</p>
<button type="button" class="btn btn-default btn-lg btn-center" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-hand-right"></span> Try me
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Bower Component Test</h4>
</div>
<div class="modal-body">
If you see this dialog, it means that everything works <span class="glyphicon glyphicon-ok"></span> OK
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create a demo.css
file:
.main-page {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
background-color: #26A65B;
}
.message-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
width: 50%;
margin: 0 auto;
background: #F2F1EF;
padding: 30px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
Create entry.js
, where you require bootstrap.
require("jquery");
require("bootstrap");
require("./demo.css");
Twitter bootstrap comes with CSS, JavaScript, Fonts and Less. Let's assume we want to use compiled CSS, and we don't need less files.
Create webpack.config.js
with the following content:
var webpack = require("webpack");
var BowerWebpackPlugin = require('bower-webpack-plugin');
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.css$/, loader: "style!css"},
{test: /\.(woff|svg|ttf|eot)([\?]?.*)$/, loader: "file-loader?name=[name].[ext]"}
]
},
plugins: [
new BowerWebpackPlugin({
excludes: /.*\.less/
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Run webpack
and open the index.html
file.
Release History
0.1.9 - 28 Sep 2015
Changes:
- Respect '.bowerrc' settings
- Use MIT as SPDX license
0.1.8 - 06 Apr 2015
Changes:
0.1.6 - 01 Feb 2015
Changes:
0.1.5 - 05 Jan 2015
Changes:
0.1.4 - 13 Dec 2014
Fixes for issues:
0.1.3 - 27 Nov 2014
Fixes for issues:
0.1.2 - 31 Oct 2014
Fixes for issues:
0.1.1 - 30 Oct 2014
Fixes for issues:
- Use resolve.modulesDirectories, when resolving bower modules
- Requesting modules aliased via 'resolve.alias' fails
0.1.0 - 26 Oct 2014
Initial release