动态加载多个入口点并拆分输出

Question

我有几个不同的angular模块，我想动态地连接起来，这样每个模块都有一个不同的单一输出文件。

因此，如果在resources/assets/js/angular/modules目录中，我有：

Role   
  - controllers
      roleIndexController   
  - app.js

Descriptions
   -controllers
      descriptionIndexController
   -app.js

我希望这个文件最终是两个文件：

RoleModule.js
DescriptionsModule.js

我不希望每次添加新模块时都必须显式地将每个模块添加到gulp文件中。

我试过在laravel elixir中使用webpack添加glob字符：

require('laravel-elixir-webpack');

elixir(function (mix) {    
    mix.webpack(
        ['angular/app.js', '.angular/modules/**/app.js'],
        {
            output : {
                filename : './angular/app.js'
        }
})

还可以使用gulp-webpack和glob_entries

gulp.task('compileAngularScripts', function(){
    return gulp.src('angular/app.js')
        .pipe(webpack({
            entry :   glob_entries('./resources/assets/js/angular/modules/**/app.js'),
            output : {
                filename : 'app.js'
            }
        }))
        .pipe(gulp.dest('test/'));
});

我甚至不能让全局通配符工作来动态地连接文件，更不用说将每个模块分解成它自己的文件了。

有没有办法用gulp来实现这一点呢？

Answer 1

我通过使用带有webpack的glob npm包实现了这一点。

var glob                     = require('glob');
var webpack                  = require('gulp-webpack');

 elixir(function (mix) {
    .task('compileScripts')


gulp.task('compileScripts', function () {

return gulp.src('angular/app.js')
    .pipe(webpack({
        entry  : entries(),
        output : {
            filename : "[name]Module.js"
        }
    }))
    .pipe(gulp.dest('public/js/angular/modules'));
});

function entries() {
    var entries = {};
    glob.sync('./modules/**/Resources/assets/angular/app.js').forEach(function (url) {
        var moduleNmae      = url.split("/")[2];
        entries[moduleNmae] = url;
    });

    return entries;
}