Using Webpack and Gulp how can I selectively combine some files and not others?

Question

So I have a situation... I am using Gulp (no choice have to stick with it on this one), and I need to use Webpack to combine some JS files, as outlined in the example below, and move them to a specific location.

'fileA.js' > 'dest/js/fileA.js');
['fileB.js', 'fileC.js'] > 'dest/js/combinedBC.js');
['fileD.js', 'fileE.js', 'fileF.js', 'fileG.js'] > 'dest/js/combinedDEFG.js');
'fileH.js' > 'dest/js/fileH.js');

As you can see from the example, I need to KEEP the names of the single files, but specify a name for the combined files.

Does anyone have any idea on how to do this without repetitively writing gulp tasks? Or even if there is a better way to do this...

TL:DR Have a long list of JS files, need to combine some but not others

Answer 1

This is a basic approach to achieving the requirements outlined (there may be more you need to do like transpile, etc., but that wasn't stated):

gulpfile.js

You probably don't even need gulp-copy and can just use gulp.dest.

const { src, dest } = require('gulp')

function copy() {
  return src('file{A|H}.js')
    .pipe(dest('dest/js'))
}

exports.copy = copy

webpack.config.js

This uses a "multi-main entry" for the entry and exporting multiple configurations.

module.exports = [
  {
    name: 'combinedBC',
    entry: ['fileB.js', 'fileC.js'],
    output: {
      filename: './dest/js/combinedBC.js'
    }
  },
  {
    name: 'combinedDEFG',
    entry: ['fileD.js', 'fileE.js', 'fileF.js', 'fileG.js'],
    output: {
      filename: './dest/js/combinedDEFG.js'
    }
  }
]

package.json

{
  "scripts": {
    "build": "gulp copy && webpack"
  }
}