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

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/'));
});

我什至无法使用 glob 通配符来动态连接文件，更不用说将每个模块分解成它自己的文件了。

有没有办法使用 gulp 来做到这一点？

Answer 1

我通过使用 glob npm 包和 webpack

完成了这个

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;
}

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

Dynamically loading multiple entry points and splitting output

angularjs

webpack

laravel-elixir