Feature Request: multiple entry points

[builtbylane]

Multiple entry points would be nice to have for creating separate style and javascript bundles. Our personal use case would be for Shopify plus checkout pages.

[presto2116]

Any updates on this? seems like it would be great to have control to code split and create multiple bundles.

[iamkevingreen]

So the way slater handles the in/out right now is currently single input, despite the fact that spaghetti is actually just a wrapper for a webpack config. I can look at refactoring this, or just rewriting the compiler for multiple in/outputs https://github.com/the-couch/slater/blob/master/packages/compiler/lib/createConfig.js#L51

or if anyone else wants to split this out obviously more than welcome, I have need of bundle splitting react out of an older slater site so will try to come up with a one-off-solution or roll it into the compiler

[presto2116]

@iamkevingreen I started playing with this since I have a little free time. have multiple in/out working. if array of entries, create object with each entry point

https://github.com/the-couch/slater/blob/master/packages/compiler/lib/createConfig.js#L51 changes

  // wc.entry = {
  //   [path.basename(conf.in, '.js')]: path.resolve(cwd, conf.in)
  // }
  
  wc.entry = (Array.isArray(conf.in) ? conf.in : [conf.in]).reduce((obj, file) => {
    obj[path.basename(file, '.js')] = path.resolve(cwd, file);
    return obj;
  },{});

tricky part seems to be how to handle aliases with multiple entry points especially if entry points are not in the same directory. Any suggestions?

[iamkevingreen]

This is looking great, would you want to put together a PR for this? What's the use case for different directories? I feel like given the Shopify ecosystem we're sort of limited with what we're really doing here and it still makes sense to at least keep css/js together where it should be or are you hoping to split files for different reasons?

[presto2116]

I have no desire for different directories, but passing in an array of conf.assets.in breaks the alias constructor inside the getConfig file line 33

config.assets.alias = {
  '@': abs(path.dirname(config.assets.in)),
  ...(config.assets.alias || {})
}

since config.assets.in can be an array or a string, I am not sure how to select the @ alias here. I personally rarely use this feature, but want to handle all use cases.

[radmedov]

@iamkevingreen the cool edge-case of using the multiple entries is to load template specific JS/CSS file on every template page instead of loading one huge file on every page(What actually Slate has under the hood). It also isolates the CSS which is also nice practice. Would be great to see this feature in Slater. Thanks.