polymer-webpack-loader


> Polymer component loader for webpack.

The loader processes Polymer 3 template elements to minify the html and add images, fonts and imported
stylesheets to the webpack dependency graph.

Looking for the Polymer 2 version? See the
Polymer 2 branch

Configuring the Loader

``javascript
{
test: /\.js$/,
options: {
htmlLoader: Object (optional)
},
loader: 'polymer-webpack-loader'
},
`

$3

#### htmlLoader: Object

Options to pass to the html-loader. See html-loader.

$3

If you'd like to transpile the contents of your element you can
chain an additional loader.

`js
module: {
loaders: [
{
test: /\.html$/,
use: [
// Chained loaders are applied last to first
{ loader: 'babel-loader' },
{ loader: 'polymer-webpack-loader' }
]
}
]
}

// alternative syntax

module: {
loaders: [
{
test: /\.html$/,
// Chained loaders are applied right to left
loader: 'babel-loader!polymer-webpack-loader'
}
]
}
`

Boostrapping Your Application

The webcomponent polyfills must be added in a specific order. If you do not delay loading the main bundle with your components, you will see the following exceptions in the browser console:

`
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
``

Reference the demo html file
for the proper loading sequence.

Maintainers

Bryan Coulter

Chad Killingsworth

Rob Dodson