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进行处理            ｝        ]    }}