webpack从多个条目文件导出类

Question

I'm using webpack to bundle up a framework for use by 3rd parties. This framework should expose multiple ES6 classes. Building in a modular fashion, I have written one class per file. What I want to do is build all these files together, and have them bundled up under a given "namespace". Example:

apples.js export class Apples {...}
oranges.js export class Oranges {...}

webpack.config.js:

module.exports = {
  entry: ['./src/apples.js', './src/oranges.js'],
  output: {
    path: './dist',
    filename: 'fruit.js',
    library: 'Fruit',
    libraryTarget: 'umd'
  }
}

However, if I load up this library in the browser and type fruit into the console, I only see the Oranges object under Fruit. Only the last entry file is being exposed back out in the library. Surely enough, the webpack docs confirm this behavior:

If you pass an array: All modules are loaded upon startup. The last one is exported. http://webpack.github.io/docs/configuration.html#entry

My current workaround is to export all my classes from one file, but it's getting pretty unwieldy.

How can I go about setting up a library with multiple entry files that are all exported? Or am I going about something the wrong way here?

Answer 1

I think you'd better use a entry.js file to indicate how you organize your serveral modules.

import Apples from './apples';
import Oranges from './oranges';

export {
    Apples,
    Oranges
};

By the way, if you don't want to write such stupid codes by your own, use Gulp/Grunt to generate the file 'entry.autogenerated.js' by some logic then run webpack with the entry 'entry.autogenerated.js'.