Bower Webpack Plugin
Getting started
Install the plugin:
npm install --save-dev bower-webpack-plugin
Add the plugin to your Webpack configuration:
var BowerWebpackPlugin = ;moduleexports = module: loaders: test: /\.css$/ loader: "style-loader!css-loader" plugins: ;
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: 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:
Press the button, to see if Bowerk Webpack Plugin works... Try me <!-- Modal --> Bower Component Test If you see this dialog, it means that everything works OK Close
Create a demo.css
file:
Create entry.js
, where you require bootstrap.
;;;
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 = ;var BowerWebpackPlugin = ; moduleexports = entry: "./entry.js" output: path: __dirname filename: "bundle.js" module: loaders: test: /\.css$/ loader: "style!css" test: /\.$/ loader: "file-loader?name=[name].[ext]" plugins: excludes: /.*\.less/ $: "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