Usage with Web Components

[wprater]

Any examples of how one can use this with Web Components, or say, Polymer?

[jhnns]

I'm curious about that too 👍

[wprater]

@jhnns I was going to start by forking this https://github.com/vuejs/vue-loader
just need to figure out how to split bundles and if that'll be supported with the imports.

[cliren]

I have a simple polymer element with html imports, how can I use webpack to bundle it into a component?

[christian-raedel]

👍

[jjzazuet]

Also interested here. Any comments? Thanks!

[VictorBlomberg]

polymer-loader seems to have some support, but as of now requires the JavaScript Polymer(...) registration in a separate JavaScript file, which makes it somewhat incompatible with Polymer Paper Elements collection, if I understand it correctly. I've filed an issue JonDum/polymer-loader#1, and I plan to look into it.

There's also a related issue in the html-loader repo, webpack-contrib/html-loader#14.

Have anyone here made any progress?

[jhnns]

This is probably also related to #860 since polymer components can host html, js and css?

[VictorBlomberg]

Yes, it seems highly relevant. Asked OP about current status, with any luck it could be a good start.

[aabluedragon]

Any news / plans? Polymer is now 1.0, and still can't be used nicely with web pack.

A loader that functions similar to "vulcanize" might be enough (inline all <link rel="import" href="....html"> tags recursively in the output bundle).
Added a bounty to a stack overflow question: http://stackoverflow.com/q/31028374/230637

[yutingzhao1991]

I make a simple solution with polymer-ext

[cookiengineer]

Following this issue and looking at the code inside polymer-loader, I am a bit concerned.

Is this the proposed solution?

The problem I have is the mixup between the document objects. There are actually two, one for the HTML Imports component and one for the main javascript runtime (where the library is added as a property to window). So we are talking about document !== document.currentScript.ownerDocument where currentScript is inside an external document that is not traceable from or attached to the main window or document.

How would someone write a loader if his code relies on those two objects in order to have a proper supported Shadow DOM implementation?

I'm asking because the code for my library fytoJS looks like this and I have no single clue where to start with webpack.

[o3oSupport]

Loaders should do only a single task , but those loaders do actually like a manager.How terrible they are!
Somehthing should be done to support inline web components

[aruntk]

I've built a package to handle polymer/webcomponents files and html imports (with HMR support)

https://github.com/aruntk/wc-loader. check out.

Demo https://github.com/aruntk/polymer-webpack-demo

[Shyam-Chen]

https://github.com/rnicholus/web-components-loader

[vardius]

I've setup a simple boilerplate webpack2 project for web components. Hello world example with template. You can easy add polymer to it.

[jrunning]

For those following this thread, webpack-contrib/polymer-webpack-loader is worth taking a look at. @robdodson did a writeup on Medium: How to use Polymer with Webpack.

[alexander-akait]

Thanks everyone! Please use https://github.com/webpack-contrib/polymer-webpack-loader for web components