Webpack build for application with core and sub modules

Question

I am trying to build an app using webpack but found a problem. The stack for the application is React + Flux architecture (ES6 syntax available) and for build system I am using webpack. The problem that I am trying to solve is an idea for build system of an app, that is broken into core module and submodules that are lying inside the core in subdirectory. Core system should provide basic features (like dispatcher, basic Flux actions and core view module) and plugins should be able to import core features to extend the app.

Current build solution allows me to build an app, but I've got a problem with modules that are probably duplicated. I've created Plugin store that lies in core module and also the registerPlugin action that allows to register different modules inside the core.

Core module has entry point for plugins in index.js file where I am exporting resuable components and actions (also for registering plugin).

// core index.js
export * as AppDispatcher from './src/dispatcher/AppDispatcher';
export BaseModel from './src/models/BaseModel';
export registerPlugin from './src/actions/registerPlugin';
// etc..

That file is imported with each plugin and gives me access to those modules.

// bootstrap plugin / entry point for plugin webpack
import {registerPlugin} from 'core-module';

// plugin index.js
require('./dist/plugin');

Also each plugin exposes index.js file which returns bundled product for core. Then core simply grabs that file and imports it during bootstrap process.

// bootstrap app / entry point for webpack
import 'plugins/plugin-1';
import 'plugins/plugin-2';
...

Everything worked well, but then I found a problem with (probably) dependencies duplication. When I tried to debug the code from core it seems that Plugin store, that registered for action is being called, but each store is different instance, so basically when I am listening to store change in core module I don't see that change (because some different store has changed, probably two dispatchers are here, and maybe two actions...).

Is that a problem with circular dependencies? Is there any way to configure the webpack so it won't duplicate that actions?

Also the thing worth to mention is that each plugin has own webpack configuration which allows me to create bundle for plugin, and that bundle is being grabbed by core module, and then webpack for core module is creating bundle for whole application.

Tainataint

What's your webpack plugins? I know if you add webpack.optimize.DedupePlugin() webpack will de-duplicate your bundled code when possible. – Midrash

I've tried using DedupePlugin (during creating dist version) but it didn't help – Tainataint

Answer 1

Why don't you expose your core object globally?
Then you can destruct it using ES6 destructuring.
Some probably would say global variables are a terrible idea and not using them was the main idea behind ES6 and commonJs modules and they're right, but in this special case exposing main functionalities of the core module as a single object (and please don't expose everything!) would save you a lot of complication in the future.

Cleavland

Plus I really don't know your exact webpack configuration so it was the first thing that came to my mind. – Cleavland