利用gulp自动完成配置"吐"给webpack执行

webpack的入口

理论上我们对那些文件”需要成为入口文件“都要有一个基本的规则，目前我们零散的把我们的文件统统放到了src下面，

我们先整理一下



同时，这些js理，引入的css路径也要修改

require('./../../css/index.css');

1.下面我们要来试验如何用gulp来读取webpack的配置文件？

先把webpack.config.js的入口为空

// entry是入口文件，可以多个，代表要编译那些js
entry:{},

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打包