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

注意： webpack局部安装如果出现报错 zsh: command not found: webpack，解决方法如下

--> echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc
--> source ~/.zshrc