本來(lái)打算一心跟著browserify走的,，但是無(wú)奈它的transform機(jī)制令人煩躁。今天有這么一個(gè)需求,，配置了一會(huì),，感覺(jué)用browserify搞不定。

一個(gè)react項(xiàng)目,，我的jsx文件需要編譯,，于是jsx中會(huì)require('react')，但是我又不想在輸出的bundle.js中包含react那1.5W行的代碼,，原因有二：

• 輸出的代碼太多,，分散我的注意力
• 業(yè)務(wù)代碼就那么點(diǎn)，卻需要對(duì)整個(gè)react進(jìn)行解析,，速度太慢

于是我找到了browserify + literalify的解決方案,，無(wú)奈的是始終無(wú)法搓合browserify + reactify + literalify，只得放棄,。

開(kāi)始嘗試其競(jìng)品webpack,，webpack做為一個(gè)專業(yè)的面向web的打包工具，擁用了一系列browserify不具備的，得依靠插件才能完成的事情,。

在webpack中完成我的需求就非常簡(jiǎn)單了,，只須要一個(gè)webpack.config.js文件說(shuō)明一下配置項(xiàng)即可：

module.exports = {
    // 表示入口文件
    entry: "./app.js",
    // 表示輸出文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    // 表示這個(gè)依賴項(xiàng)是外部lib，遇到require它不需要編譯,，
    // 且在瀏覽器端對(duì)應(yīng)window.React
    externals: {
      'react': 'window.React'
    },
    // 凡是遇到j(luò)sx結(jié)尾的,，都用jsx-loader這個(gè)插件來(lái)加載，
    // 且啟用harmony模式
    module: {
        loaders: [
            { test: /\.js/, loader: "jsx-loader?harmony" }
        ]
    }
};

再執(zhí)行一下webpack,，整個(gè)世界都好了,。

而且webpack還自帶watch功能，只需要webpack --progress --colors --watch就能看到帶進(jìn)度,，帶顏色的輸出了,。

最后在packages.json中的scripts下加上：

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

從此就只用輸入npm run-script pack來(lái)執(zhí)行嘍。