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. .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?
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?
Share edited Dec 22, 2021 at 3:38 Jason Farnsworth asked Sep 10, 2015 at 21:25 Jason FarnsworthJason Farnsworth 8049 silver badges15 bronze badges 5- 2 Are you saying you don't want to have some index file where you manually define what is exported? I'm not totally following. – loganfsmyth Commented Sep 10, 2015 at 21:55
-
@loganfsmyth that's partly why I'm wondering if I'm going about this the wrong way. I did just try adding an index file where I import Apples and Oranges and then do
export { Apples, Oranges }
. That seems to be a viable solution. – Jason Farnsworth Commented Sep 10, 2015 at 21:57 - 1 That's the approach I'd expect. At the end of the day, modules have some public APIs and some private, and the index file is what can define that in a central place. – loganfsmyth Commented Sep 10, 2015 at 22:04
- @JasonFarnsworth Could you share the code if you solve the problem? – Chemical Programmer Commented Nov 30, 2015 at 7:03
-
@ChemicalProgrammer I just ended up with a really simple index.js file that imported and re-exported everything.
import PiMap from './pi-map'
import PiWebService from './pi-web-service'
export { PiMap, PiWebService }
– Jason Farnsworth Commented Nov 30, 2015 at 18:51
1 Answer
Reset to default 4I 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'.