Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including html-webpack-display-loader-plugin with all npm packages installed. Try it out:

var htmlWebpackDisplayLoaderPlugin = require("html-webpack-display-loader-plugin")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

html-webpack-display-loader-plugin v0.0.2

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

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free