To use components from bower you need to add two things to webpack:

• Let webpack look in thebower_components folder.
• Let webpack use themain field from thebower.json file.

Seeconfigurationresolve.modulesDirectories andlist of pluginsResolverPlugin.

varpath=require("path");varwebpack=require("webpack");module.exports={resolve:{modulesDirectories:["web_modules","node_modules","bower_components"]},plugins:[newwebpack.ResolverPlugin(newwebpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json",["main"]))]}

In many cases modules from npm are better than the same module from bower. Bower mostly contain only concatenated/bundled files which are:

• More difficult to handle for webpack
• More difficult to optimize for webpack
• Sometimes only useable without a module system

So prefer to use the CommonJs-style module and let webpack build it.

bower package vs. npm package

Note: the bower package is built with browserify and envify (NODE_ENV = "production")

So we compare four configurations:

a) webpack + bower package (DefinePlugin makes no difference here as envify already removed debug code)

b) webpack + bower package +module.noParse for react

c) webpack + npm package

d) webpack + npm package +DefinePlugin withNODE_ENV = "production"

(webpack 1.3.0-beta8, react 0.10.0, bundle size minimized)