https://github.com/Banno/polymer-webpack-loader
WebPack Loader for Polymer Web Components
https://github.com/Banno/polymer-webpack-loader
polymer webpack webpack-loader
Last synced: 3 months ago
JSON representation
WebPack Loader for Polymer Web Components
- Host: GitHub
- URL: https://github.com/Banno/polymer-webpack-loader
- Owner: Banno
- License: mit
- Created: 2017-05-03T21:18:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-08-21T15:50:40.000Z (6 months ago)
- Last Synced: 2025-09-27T12:33:41.862Z (5 months ago)
- Topics: polymer, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 2.8 MB
- Stars: 194
- Watchers: 21
- Forks: 48
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-polymer - Polymer Webpack Loader
README
# polymer-webpack-loader
[](https://badge.fury.io/js/polymer-webpack-loader)
> [Polymer](https://www.polymer-project.org/) component loader for [webpack](https://webpack.js.org/).
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](https://github.com/webpack-contrib/polymer-webpack-loader/tree/polymer2)
## Configuring the Loader
```javascript
{
test: /\.js$/,
options: {
htmlLoader: Object (optional)
},
loader: 'polymer-webpack-loader'
},
```
### Options
#### htmlLoader: Object
Options to pass to the html-loader. See [html-loader](https://github.com/webpack-contrib/html-loader).
### Use with Babel (or other JS transpilers)
If you'd like to transpile the contents of your element you can
[chain an additional loader](https://webpack.js.org/configuration/module/#rule-use).
```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](https://github.com/webpack-contrib/polymer-webpack-loader/blob/master/demo/src/index.ejs)
for the proper loading sequence.
Maintainers
