Organization for source code and demos

Question

I am working on a JavaScript library (repository here) and it includes both the source code inside the directory lib/ and some demos/examples inside the directory demos/. Both some of the demos as well as the entire source code of the library must go through Webpack as they have to go through Babel (because I'm using ECMAScript 6).

However, I am not sure if I should have only webpack configuration file for both the demos and the source code because this way I don't think I can make my library output be a single JavaScript file. Because the library itself is made of several files, it has various entry points (Sprite, SpriteList and Game). These then get put on single output files and I would like for them to be merged. I know that I can use both Webpack and Gulp to achieve this, but I'm not sure if this is the right way.

In short, what I'm looking for is the best option for organising my build configuration (one webpack file vs two webpack files, the second one being inside the demos/ directory) and also webpack vs webpack+gulp.

Ideally, though, I would simply tweak my configuration file and be able to generate a single file for my library output using only Webpack, but I don't think that's possible.

The configuration file is as follows:

import path from 'path';

export default {
  entry: {
    Sprite: "./lib/Sprite.js",
    SpriteList: "./lib/SpriteList.js",
    Game: "./lib/Game.js",

    HelicopterDemo: "./demos/helicopter_game/PlayState.js",
    CircleExample: "./demos/circle_example/PlayState.js"
  },

  output: {
    path: __dirname,
    filename: "./build/[name].js",
    library: ["Pentagine", "[name]"],
    libraryTarget: "umd"
  },

  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },

  resolve: {
    root: [
      path.resolve('./lib/')
    ]
  },

  externals: {
    "underscore": "underscore"
  }
};

Answer 1

You can combine your main entry points in one using one JS file, simply listing all of them, e.g. main.js:

require('./lib/Sprite.js');
require('./lib/SpriteList.js);
require('./lib/Game.js');

So you can use it as main entry point in webpack config:

entry: {
    Main: "./main.js",
    HelicopterDemo: "./demos/helicopter_game/PlayState.js",
    CircleExample: "./demos/circle_example/PlayState.js"
}