Create all-in-one bundle?

Question

I'd like to know if it's possible to create an all-in-one.js bundle, which includes all components, so it wouldn't be necessary to load other script tags.

My config:

exports.config = {
  srcDir: "./webcomponents",
  outputTargets: [
    {
      type: "dist",
      dir: "./build/webcomponents/"
    }
  ]
}

score 4 · Accepted Answer · answered Jun 01 '18 at 22:21

4

Out of the box this isn't available. This is intentional, to provide zero-config code-splitting and other performance benefits. Here's a GitHub issue with a bit more detail.

That said, as of 0.9.0 Stencil now produces an esm/ folder, which you can bundle yourself into an all-in-one bundle using Webpack or Rollup.

answered Jun 01 '18 at 22:21

matthewsteele

1,797
1
15
31

Btw, I've tried, and it works (at least after calling `myapp.defineCustomElements(window);`), but the styles don't show on Firefox, because it generates the styles like `:host{cursor:pointer}` instead of `[data-my-component]{cursor:pointer}`, even thought I built `es5`. Any idea? – kraftwer1 Jun 08 '18 at 15:21
Figured out why: I wasn't using the `*.sc.js` files ("sc" means "scoped"). – kraftwer1 Jun 09 '18 at 07:39
@kraftwer1 If you really managed to completely circumvent the lazy-loading and bundling _everything_ into one file, would you care to share your solution? – Christian Ulbrich Sep 28 '18 at 09:13
@ChristianUlbrich Unfortunately - I haven't been successful. And I don't even think it's possible without touching the code of Stencil.js itself. Because for each component, Stencil.js generates two components: one for browsers with native support, and one that is polyfilled. – kraftwer1 Sep 28 '18 at 13:11
@ChristianUlbrich just a crazy thought that I wouldn't do myself: Maybe you could write an offline file server as a web worker. – kraftwer1 Sep 28 '18 at 13:20
@kraftwer1 do you have a, example in github on how you achieven packing everything? – Michel Tobon Jan 28 '19 at 23:52
@MichelTobon I did not - at least not completely (styles not showing...). This has to be built within Stencil.js. – kraftwer1 Jan 29 '19 at 13:48
@matthewsteele, where is it mentioned that esm/ directories can be bundled up into one js ? – Prasheel Feb 01 '19 at 14:24

score 2 · Answer 2 · answered Jan 30 '19 at 18:06

2

I was able to create a bundle of individual stencil components by using webpack with the plugin @stencil/webpack.

Just add the plugin, then in your entry file, import your/stencil/component/file.js

answered Jan 30 '19 at 18:06

elyeo

21
1

And that works with scoped styles as well? Meaning it runs on IE11 with styles? – kraftwer1 Jan 31 '19 at 07:57

Create all-in-one bundle?

2 Answers2