html-webpack-display-loader-plugin

0.0.2 • Public • Published

html-webpack-display-loader-plugin

Inject light weight html & css to display a loader until your script is loaded via HTML Webpack Plugin.

Usage

▼Input

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackDisplayLoaderPlugin = require("html-webpack-display-loader-plugin");

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlWebpackDisplayLoaderPlugin({
            id: "root-element-id",
            class: "root-element-class"
        })
    ]
};

▼Output

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    <style>
      /* Loader's styles here. Default loader display a simple blinking text.*/
    </style>
  </head>
  <body>
    <div id="root-element-id" class="root-element-class" data-hwdlp-uuid-hash-to-scoped-styles>
      <!-- Loader's HTML here. -->
    </div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

You can replace the root div tag when the bundled script loaded. For Ex., in index.js

addEventListener("DOMContentLoaded", function() {
    var app = document.createElement("div");
    document.body.replaceChild(app, document.body.firstElementChild);
});

Many frameworks like vuejs, react, mithril are automatically replace the elements by query.
Ex. Vuejs

new Vue({
    el: "#app",
    render: h => h(vueComponent)
});

will replace the element which have "app" id to the Vue component.

Package Sidebar

Install

npm i html-webpack-display-loader-plugin

Weekly Downloads

1

Version

0.0.2

License

MIT

Last publish

Collaborators

  • h-ikeda