ScriptedAlchemy / webpack-external-import

Dynamically import modules from other webpack bundles. Painless code sharing between separate apps
BSD 3-Clause "New" or "Revised" License
415 stars 42 forks source link

Question: Are nested componenst/modules supported without adding them to interleave #127

Open ChrisMalherbe opened 4 years ago

ChrisMalherbe commented 4 years ago

Hi,

Thank you for the work on webpack-external-import.

I have a question, is it possible to have child components of an interleaved component automatically available to the container application.

If we changed the vendor application to import another local component like this:

Screen Shot 2020-02-17 at 5 56 43 pm

Would we have to expose Title3 as interleaved as well, or is there a way to automatically expose Title3?

rickihastings commented 4 years ago

I'm struggling to figure this out as well. Without this it does not seem very useful, as you can't define 100s of files that a micro-frontend could potentially have and have them all individually chunked, seems very inefficient.

From what I can gather looking at other github issues and various readings it is possible, it's just not documented. Trying to mess around with webpack chunks. Did you get anywhere with this?

Would be good if someone could shed some light on this, I've tried the following with no luck:

config.optimization.splitChunks.cacheGroups.microfrontend = {
  test: path.resolve('src'),
  name: 'microfrontend',
  chunks: 'all',
};
rickihastings commented 4 years ago

After a lot of digging I've finally figured this out, I don't know if it's intended to function like this or a side effect, but you can do the following:

"interleave": {
  "src/HelloWorld.js": "website4_app"
},

Then in your webpack.config.js

config.optimization.splitChunks = {
  chunks: "all",
  maxInitialRequests: Infinity,
  minSize: 0,
  cacheGroups: {
    'website4_app': {
      test: /[\\/]src\/(.*)/,
      name: 'website4_app',
    },
  }
};

This will bundle any resources in ./src into the component bundle that this module creates.