用webpack来取代browserify

本来打算一心跟着browserify走的，但是无奈它的transform机制令人烦躁。今天有这么一个需求，配置了一会，感觉用browserify搞不定。

一个react项目，我的jsx文件需要编译，于是jsx中会

require('react')

• 输出的代码太多，分散我的注意力
• 业务代码就那么点，却需要对整个react进行解析，速度太慢

于是我找到了browserify + literalify的解决方案，无奈的是始终无法搓合browserify + reactify + literalify，只得放弃。

开始尝试其竞品webpack，webpack做为一个专业的面向web的打包工具，拥用了一系列browserify不具备的，得依靠插件才能完成的事情。

在webpack中完成我的需求就非常简单了，只须要一个webpack.config.js文件说明一下配置项即可：

module.exports = {
// 表示入口文件
entry: "./app.js",
// 表示输出文件
output: {
path: __dirname,
filename: "bundle.js"
},
// 表示这个依赖项是外部lib，遇到require它不需要编译，
// 且在浏览器端对应window.React
externals: {
'react': 'window.React'
},
// 凡是遇到jsx结尾的，都用jsx-loader这个插件来加载，
// 且启用harmony模式
module: {
loaders: [
{ test: /\.js/, loader: "jsx-loader?harmony" }
]
}
};

再执行一下

webpack

而且webpack还自带watch功能，只需要

webpack --progress --colors --watch

最后在

packages.json

"pack": "webpack --progress --colors --watch"

从此就只用输入

npm run-script pack