用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來執行嘍。