Polymer 1.0 + Webpack

Question

Currently I am trying to use Webpack (http://webpack.github.io/) as my module builder and wanted to see if anyone has done this yet with Polymer v1.0. There is a webpack loader called polymer-loader (https://www.npmjs.com/package/polymer-loader) but it does not work with anything higher than Polymer v0.5.

Garderobe

Please let us know what you have tried. What was your expected result, what actually happened? – Typo

He has tried polymer-loader. as he said, it works with Polymer 0.5, but not 1.0. – Tape

The loader is broken because of the API change in 1.0 & 0.8, and unfortunately nobody is going to fix it as no PR queued so far. May be you can start without loader first: require the component js files & assets as general js files do, then npm install the libraries and setup the config file. – Inflammation

The last update to polymer-loader (npmjs.com/package/polymer-loader) was pushed at least 3 months before Polymer 1.0 was published (googledevelopers.blogspot.com/2015/05/polymer-10-released.html) – Lightproof

I've built a package to handle polymer/webcomponents files and html imports (with code reload support) github.com/aruntk/wc-loader. check out. Demo github.com/aruntk/polymer-webpack-demo – Bracey

Answer 1

Unfortunately, Polymer 1.0 is presently unsupported by polymer-loader due to an API change. It is possible that this may be repaired in the near future, but in the meantime you may have to resort to either a different package or builder. Hopefully a fix becomes available soon.

Salutation

Thank god. Who on earth wants to use Webpack? – Phenazine

Answer 2

I make a simple solution with polymer-ext

var PolymerExt = require('polymer-ext')

var t = require('raw!./test.tmpl')
var s = require('raw!./test.css')

PolymerExt({
  is: 'card-panel',
  template: t,
  style: s,
  ... // other polymer options
})

Instrument

Answer 3

I just succeeded by means of this loader:

https://github.com/aitoroses/vulcanize-loader

Unobvious thing is that i had to install the webcomponent that i wanted through bower (yarn does the job too). After that, manually reference it inside manually created importer.html file, and then at the end, reference that importer.html file inside your js module:

import 'vulcanize!./importer.html';

Crinose