1.下面我们要来试验如何用gulp来读取webpack的配置文件?
先把webpack.config.js的入口为空
// entry是入口文件,可以多个,代表要编译那些js
entry:{},
1
2
1
2
2.修改gulpfile.js
var gp = require('gulp');
var gulp_webpack = require('gulp-webpack')
var webpack= require('webpack');
var webpack_config = require('./webpack.config.js');
// 生成js文件
gp.task('build-js',function(){
gulp_webpack(webpack_config,webpack)
.pipe(gp.dest('./build/js'))
});
// 读取config
gp.task('config',function () {
var fs = require('fs');
var root = './src/modules/';
var config = {};
var dirObj = fs.readdirSync(root);
dirObj.forEach(function (d) {
// d 是文件夹名,也代表了 我们的入口节点名
var fileObj = fs.readdirSync(root + d);
var ret = fileObj.map(function (jsfile) {
return root + d + '/' + jsfile;
})
config[d] = ret;
})
webpack_config.entry = config;
});
// 最终生成
gp.task('run',['config'],function(){
webpack(webpack_config,function (error,status) {
// 这里需要gulp处理过程
});
})
gulp的config任务里完成了对./src/modules/下文件的读取,然后组织成配置,给web pack的entry
3.执行gulp任务:gulp run 后,同样完成了webpack打包