webpack开发工具 （gulp、browserify、webpack）

Gulp(处理流式的内容)

安装（npm install gulp －g）
(npm init //为了创建package.json文件，指定用到的第三方库)
（ gulp 检测，文件名必须是gulpfile.js）

gulp.task('名字',['依赖的文件1','依赖的文件2'],function()({
    //具体执行
}))

例如：

gulp.task('sass',function()({
    //具体执行
    gulp.src('./sass/**/*/*.scss') //读入文件内容
        .pipe(sass().on('error',sass.logError))//转换成css
        .pipe(gulp.dest('./css'));//写入目标目录
}))

注意：gulp会执行默认命令，所以需要进行指定

gulp.task('default',['']);

Browserify （浏览器段代码模块化的工具）

原理:部署时处理代码依赖，将模块打包到一起。
安装（npm install browserify）
安装插件（npm install reactify //和browserify配合很好）

打包为单个文件存在的我问题：
暂时用不到的代码也会被打包，体积大，首次加载速度慢
只要一个模块更新，整个文件缓存失效

解决方案：（entry point ,入口点技术）
每个入口点打包一个文件，两个入口点的相同依赖模块单独打包为common.js可以解决单个文件的问题，代价是增加依赖维护成本

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

gulp.task('jsx',function(){
    browserify({
        enties:['./app.jsx'],
        transform:[reactify]    
    })  //处理依赖，并转换成js代码
    .bundle()  //打包
    .pipe(source())  //输入转换过来
    .pipe(gulp.dest('./'));  //显示到最终的文件夹
})

gulp.task('default',['jsx']);

Webpack(代码打包、预处理)

webpack是加强版的browserify，瞄准大型单页应用，目标是专家用户

webpack安装

(npm install webpack -g)
(npm install webpack jsx-loader 此命令是为了将其解析成js文件)

webpack特色

code splitting 和 loader
code splitting 可以自动完成，不需要手动处理
loader:可以处理各种类型的静态文件，并且支持串联操作

var webpack = require('webpack');
module.exports = {
    entry:｛
        app:'./app.jsx',
        app2:'./app2.jsx'
        },
    output:{
        path:'./',
        filename:'app.js',
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin("common.js")  //提取通用代码插件
    ],
    module:{
        loaders:[
            ｛
                test:'/\.js$/',
                loader:'jsx-loader', // 一旦找到就会用loader进行处理
            ｝
        ]
    }
}