HTML Imports Loader for Webpack
Installation
$ npm install html-imports-loader
Usage
Use it in Vanilla JS
Webpack config when dev
test: /\.html$/ use: loader: 'html-imports-loader' include: /bower_components/ exclude: /public/
console /** * you will get a object like this * { * tagName: 'paper-button', * url: '/Users/someone/CurrentProject/bower_components/paper-button/paper-button.html' * } */
// we can load it by using `link` tag const link = document linkrel = 'import' linkhref = PxTimeseriesurl documenthead // we can create a dom instance by `createElement` method const PaperBtn = document // set `innerText` PaperBtninnerText = 'Click it' // set some properties for it const paperBtnProps = disabled: false toggles: true raised: true Object // mount it to specific root element when `WebComponentsReady` window
And pls serve the bower_components folder in your static server at the same time for better dev exprience.
Here's a sample in express
// serve bower components app
Webpack config when production
test: /\.html$/ use: loader: 'html-imports-loader' options: emitFile: true include: /bower_components/ exclude: /public/
With the config emitFile:true
you can get a vulcanized html modules.
Use it in ReactJS
We now support React 💪💪💪
Todos
- User config for vulcanize
- Emit as a Vue/Ng Component