标签：return div pipe [] nbsp 依赖 动态 pack 模块
本文将介绍如何利用gulp+webpack构建一个基本的前端项目。假设你已经安装了node环境并且会使用简单的命令行
npm install gulp -g
gulp -v
基于gulp的插件非常多，建议大家查看npm官网https://www.npmjs.com
webpack的用途主要是模块化+打包。安装敲入命令
npm install gulp-webpack
在gulpfile.js中引入依赖，并编写打包的出入口，这样一个基本的gulp+webpack构建就实现了
var gulp=require(‘gulp‘); var webpack=require(‘gulp-webpack‘); gulp.task(‘default‘,function(){ return gulp.src(‘src/entry.js‘) .pipe(webpack()) .pipe(gulp.dest(‘/dist/‘)); })
补充一个知识点，gulp的入口文件是可以动态获取的，比如src下的所有js目录可以写成“src/*.js”，但是webpack没有这样的统配符，所以可以结合node的模块，fs，path 或者glob来使用返回入口文件的数组
//方法1：使用path和fs模块
function getEntry() { var jsPath = path.resolve(srcDir, ‘js‘); var dirs = fs.readdirSync(jsPath); var matchs = [], files = {}; dirs.forEach(function (item) { matchs = item.match(/(.+)\.js$/); if (matchs) { files[matchs[1]] = path.resolve(srcDir, ‘js‘, item); } }); return files; }
//方法2：使用glob模块 glob("src/*.js",function (er, files) { return files; })
关于gulp-webpack的更多用法查看网址：https://www.npmjs.com/package/gulp-webpack
标签：return div pipe [] nbsp 依赖 动态 pack 模块
原文地址：http://www.cnblogs.com/sherry-long/p/6000550.html
