❤
npm
Sign UpSign In

html-component-loader

1.3.2 • Public • Published

HTML Webpack Plugin

NPM

This is a webpack loader for html files, that are looks like 'components': contain html, inline js and scss.

Maintainer: vtlk @vtlk7

Installation

Install the plugin with npm:

$ npm install html-component-loader --save-dev

Important

It works with html-loader.

Basic Usage

var webpackConfig = {
    ...
    module: [
        {
            test: /\.html$/,
            use: [
                {
                    loader: 'html-loader',
                    options: {
                        minimize: false,
                        interpolate: 'require',
                        attrs: false
                    }
                },
                {
                    loader: 'html-component-loader',
                    options: {
                        src: __dirname
                    }
                }
            ]
        }
    ],
    ...
};

This will generate from this:

<!DOCTYPE html>
<html lang="en">
<head>
    ${require('./src/includes/head.html')}
</head>
<body>
    <div class="row">
        <div class="cols s_12">12</div>
        <div class="cols s_12">12</div>
    </div>
 
    <div class="row">
        <div class="cols s_24">
            <img src="img/logo.png" alt="">
        </div>
    </div>
 
    ${require('./src/includes/blocks/some.html')}
 
    <div id="app"></div>
</body>
</html>

this:

<!DOCTYPE html>
<html lang="en">
<head>
 
    <!--#BEGIN#-->
    <!-- /includes/head.html -->
    <meta charset="utf-8">
    <title>vue-simple</title>
 
    <script>
    window.STACK = [];
    function EXE(func) {
        STACK.push(func);
    }
    </script> 
    <!--#END#-->
 
    <link href="bundles/commons.css" rel="stylesheet">
    <link href="bundles/index.css" rel="stylesheet">
</head>
<body>
    <div class="row">
        <div class="cols s_12">12</div>
        <div class="cols s_12">12</div>
    </div>
 
    <div class="row">
        <div class="cols s_24">
            <img src="img/logo.png" alt="">
        </div>
    </div>
 
 
    <!--#BEGIN#-->
    <!-- /includes/blocks/some.html -->
    <div class="Some">
        <span>hello world</span>
    </div>
 
    <style type="text/css">.Some {
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        background-color: red;
    }
 
    .Some span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
 
    .Some span:after {
        content: 'qwd';
    }
    </style> 
 
    <script type="text/javascript">
    EXE(function($) {
        console.log('i am Some!');
        console.log($('#body'));
    })
    </script> 
    <!--#END#-->
 
    <div id="app"></div>
    <script type="text/javascript" src="bundles/commons.js"></script> 
    <script type="text/javascript" src="bundles/index.bundle.js"></script> 
</body>
</html>

As you are see, this loader just preprocess your included html components and inject transformed code into main html file.

Example of /includes/blocks/some.html

<div class='Some'>
    <span>hello world</span>
</div>
 
<style lang='scss' scope='Some'>
@import "scss/wanted";
 
@include single-transition;
background-color: red;
 
span {
    display: flex;
    justify-content: center;
 
    &:after {
        content: 'qwd';
    }
}
</style> 
 
<script stack>
    console.log('i am Some!');
    console.log($('#body'));
</script> 

Configuration

Allowed values are as follows:

  • src: root of your project directory (__dirname)

License

This project is licensed under MIT.

Readme

Keywords

Package Sidebar

Install

npm i html-component-loader

Repository

github.com/brezitsky/html-component-loader

Homepage

github.com/brezitsky/html-component-loader#readme

Weekly Downloads

12

Version

1.3.2

License

MIT

Last publish

Collaborators

  • brezitsky
Try on RunKit
Report malware