作为序言，我意识到我应该避免使用Bower，而是使用NPM来管理我的所有JavaScript依赖项。但是，我正在使用一些大量使用Bower的遗留代码，直到我可以将所有内容移到NPM上，我希望通过Bower和Webpack获得我的代码库的工作版本。
话虽如此，我正在遵循官方指南中使用Bower和Webpack的配置设置：https://webpack.github.io/docs/usage-with-bower.html
特别是，我已经设置了一个Github仓库，我能够bower install jquery并使用官方指南中的配置，我能够在我的源代码中require("jquery")并且拥有它适用于Webpack。鉴于这适用于jQuery，我认为它适用于其他bower包，包括React。
但是，在运行bower install react之后，我尝试在我的源代码中require("react")但是Webpack提出错误说Module not found: Error: Cannot resolve module 'react' in /Users/wmock/Desktop/using-bower-with-webpack/src。
这是我的Github回购： https://github.com/fay-jai/Using-Bower-Through-Webpack
我有3个分支：
问题：
编辑（2016年4月4日）：
答案 0 :(得分：4)
DirectoryDescriptionFilePlugin无法处理文件名数组，因此无法导入React和ReactDOM。您可以使用像Bower Webpack Plugin这样的插件来解决数组问题，但它只导入数组中的第一个文件，并忽略其余文件，因此可以导入React，但ReactDOM不能。
自己对文件进行别名将始终有效。主要缺点是您需要手动为每个bower依赖项添加别名。
resolve: {
alias: {
"jquery": bower_dir + "/jquery/dist/jquery.js",
"react": bower_dir + "/react/react.js",
"react-dom": bower_dir + "/react/react-dom.js" // added alias for react-dom
}
}
您实际上可以将DirectoryDescriptionFilePlugin解析与通过别名手动解析相结合。正常的模块，如jQuery将以官方方式解析，多文件模块可以别名：
resolve: {
modulesDirectories: ["node_modules", "bower_components"],
alias: {
"react": bower_dir + "/react/react.js",
"react-dom": bower_dir + "/react/react-dom.js"
}
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
)
]
答案 1 :(得分：0)
这是一个问题，因为该示例使用反应版本0.10.0，但从版本0.14.0反应作为两个包发货。在react包的 .bower.json 配置中， main 属性是一个数组，似乎webpack不喜欢它。
不幸的是，以下问题概述了没有这样的修复，但插件可能有效：Resolve main field as array for Bower #4
然而，在该问题的深处，我设法找到了一种修改 webpack.config.js 的方法，其中第22行可以从以下位置更改：
...DirectoryDescriptionFilePlugin(".bower.json", ["main"])
为：
...DirectoryDescriptionFilePlugin(".bower.json", ["main", ["main", 0]])
将解析字符串 main 和数组 main ，但只解析第一个组件。我不知道是否可以使用该插件遍历所有数组条目，但它比编写自己的稍微容易一些。 您无法为数组添加额外的解析器（例如解析react-dom）：
... DirectoryDescriptionFilePlugin（“。bower.json”，[“main”，[“main”，0]，[“main”，1]]）
因此，如果您需要react-dom包，那么您可能需要找到另一种方法来实现它。