Bundling Alpine and Spruce together with other vendor scripts

[riteable]

Is there a way to bundle Alpine and Spruce together with my other vendor scripts, apart from my application script?

Currently I'm using Webpack, and I have tried to do the following:

{
  // ...
  entry: {
    app: ['js/app.js', 'css/app.scss'],
    vendor: [
      '@ryangjchandler/spruce',
      'alpinejs',
      'js/vendor/livewire/livewire.js'
    ]
  }
  // ...
}

Loading the scripts in the head:

<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>

But when I try to use a component or the Spruce store, I get errors stating the component or the store is undefined.

When I import Alpine and Spruce inside my app.js everything works fine, but I'd like to separate my application script from the vendor scripts so that the user doesn't have to download Alpine and Spruce every time my application script changes.

[KevinBatdorf]

Try loading app.js first. The functions need to be available before Alpine attempts to render them.

[riteable]

That would potentially break other code, since application scripts usually rely on vendor libraries, so they have to be loaded after.

[KevinBatdorf]

You could bundle Alpine separately, or not at all (just place it in the head). Alpine doesn't need to be bundled.