usage with bower.cn

To use components from bower you need to add two things to webpack: 从 bower 使用组件，你需要对 webpack 添加两样东西：

• Let webpack look in the bower_components folder.

• Let webpack use the main field from the bower.json file.

• 让 webpack 搜索 bower_components 目录

• 让 webpack 使用 bower.json 文件里的 main 字段

Configuration

See configuration resolve.modulesDirectories and list of plugins ResolverPlugin. 参见configuration resolve.modulesDirectories 和 list of plugins ResolverPlugin.

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

Prefer modules from npm over bower

偏向使用 npm 的模块

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

很多情况下，来自 npm 的模块 比 来自 bower 的相同模块更好用。Bower 通常只包含 拼接后/打包好 的文件：

• More difficult to handle for webpack

• More difficult to optimize for webpack

• Sometimes only useable without a module system

• 对 webpack 来说更难处理

• 对 webpack 来说更难优化

• 有时只在没有模块系统系可用

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

所以，建议更多使用 CommonJs 风格的模块，让 webpack 来进行构建。

Example react

以 react 为例

bower package vs. npm package

Note: the bower package is built with browserify and envify (NODE_ENV = "production") 注意：bower 的包是使用 browserify 和 envify 构建的 (NODE_ENV = "production")

So we compare four configurations: 因此，从四个方面进行比较

a) webpack + bower package (DefinePlugin makes no difference here as envify already removed debug code) a) webpack + bower 的包(DefinePlugin 此时没有作用，因为 envify 已经移除调试代码)

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

c) webpack + npm package c) webpack + npm package 的包

d) webpack + npm package + DefinePlugin with NODE_ENV = "production" d) webpack + npm package + DefinePlugin 使用 NODE_ENV = "production"

configuration	modules	bundle size	compilation time
a)	1	136k	100%
b)	1	136k	73,6%
c)	136	130k	89,9%
d)	135	127k	85,3%

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