Search code examples
webpacksassgulpcoffeescript

Webpack with lots of entry points

I have a huge legacy project based on gulp.

The project has over 100 different files that are being processed by gulp, basically the structure looks more or less like that:

/assets/src/file1.sass
/assets/src/file2.coffee
/assets/src/foo/file3.sass
/assets/src/foo/bar/file4.sass
/assets/src/foo/bar/file5.coffee

Then coffee/sass files are being handled using gulp-sass and gulp-coffee like this:

gulp.task('sass', function () {
  return gulp.src('./assets/src/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./dest/css'));
});

gulp.src('./assets/src/*.coffee')
  .pipe(sourcemaps.init())
  .pipe(coffee({ bare: true }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./dest/js'));

I have also multiple index files that just @import multiple other files and are being compiled this way. So on the output I have over 100 css files with 20 indexes or so, it has to stay this way, because the app is a huge monolithic piece of ... art ;) and separate css files are being used in many places aside from index files.

Is it possible to handle this scenario with webpack somehow? I've been researching this issue for the last days but I feel like webpack is more like one file in - one file out and I couldn't make it work. I tried multiple entry points like here: https://github.com/webpack/docs/wiki/multiple-entry-points but it requires you to describe 100s of paths (compared to gulp.src('./assets/src/**/*.scss')), also even when I did it it did not work - it was extremely hard to compile single files and indexes at once.

Is it my scenario even manageable with Webpack? Won't it work slow like hell? Because it seems to be much slower for me than gulp even with small React projects with one entry point.

Thanks for any hints!

Solution

  • entry can accept a function returning a Promise which resolves to the desired configuration. Something like this:

    entry: () => new Promise((resolve) => {
  const files = fs.readdirSync('./assets/src/').filter(name => name.match(/\.coffee$/));
  const entries = {};
  files.forEach(name => entries[name] = name);
  resolve(entries);
})

    You might need some configuration tweaking to optimize performance: