Skip to content

The simpliest way to load your HTML as DOM element/node for Webpack 4+.

Notifications You must be signed in to change notification settings

Makio64/dom-element-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

dom-element-loader

The simpliest way to load your HTML as DOM element/node for Webpack 4+.

Usage

import ui from './templates/ui.html' // ui will be a dom Node 

ui.style.background = '#FFF' // do whatever you want on it ^_^

document.appendChild( ui )
<div class='sexy'>this div gonna be import in your js as DOM element</div>

Installation

npm install --save dom-element-loader
module.exports = {
	//..
    module: {
		//..
        loaders: [
            { test: /\.(html)?$/, loader: 'dom-element-loader' }
        ]
    }
};

How it works internaly & why ?

Its the raw-loader using this extraStep :

const domParser = document.createElement('div')
const string2dom = (string)=>{
	domParser.innerHTML = string 
	return domParser.firstChild
}

I used this snippet a lot while developping ui for modular tools and decided to make a loader for a better life.

Other html & dom loaders :

  • html-loader : very complete but export string and not a DOM node, so its a different usage
  • dom-loader : create an extra container & doesnt work on latest webpack

Happy coding!

For more stuffs follow me on @makio64

Cheers!

License

MIT (http://www.opensource.org/licenses/mit-license.php)

About

The simpliest way to load your HTML as DOM element/node for Webpack 4+.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published