用webpack来取代browserify

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

一个react项目，个人jsx文件须要编译，因而jsx中会require('react')，可是我又不想在输出的bundle.js中包含react那1.5W行的代码，缘由有二：

• 输出的代码太多，分散个人注意力
• 业务代码就那么点，却须要对整个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中的scripts下加上：

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

今后就只用输入npm run-script pack来执行喽。