$ npm install html-imports-loader
Webpack config when dev
{
test: /\.html$/,
use: [
{
loader: 'html-imports-loader'
}
],
include: /bower_components/,
exclude: /public/
}
import paperButton from '../bower_components/paper-button/paper-button.html'
console.log(paperButton)
/**
* 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.createElement('link')
link.rel = 'import'
link.href = PxTimeseries.url
document.head.appendChild(link)
// we can create a dom instance by `createElement` method
const PaperBtn = document.createElement(paperButton.tagName)
// set `innerText`
PaperBtn.innerText = 'Click it'
// set some properties for it
const paperBtnProps = {
disabled: false,
toggles: true,
raised: true
}
Object.keys(paperBtnProps).map(prop => {
PaperBtn[prop] = paperBtnProps[prop]
})
// mount it to specific root element when `WebComponentsReady`
window.addEventListener('WebComponentsReady', function() {
document.querySelector('#root').appendChild(PaperBtn)
})
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.use('/bower_components', express.static('./bower_components'))
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.
We now support React 💪💪💪
- User config for vulcanize
- Emit as a Vue/Ng Component