https://github.com/h-ikeda/html-webpack-display-loader-plugin
Inject light weight html & css to display a loader until script is loaded via HTML Webpack Plugin.
https://github.com/h-ikeda/html-webpack-display-loader-plugin
Last synced: 10 months ago
JSON representation
Inject light weight html & css to display a loader until script is loaded via HTML Webpack Plugin.
- Host: GitHub
- URL: https://github.com/h-ikeda/html-webpack-display-loader-plugin
- Owner: h-ikeda
- License: mit
- Created: 2017-05-18T09:17:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-02T12:40:16.000Z (over 4 years ago)
- Last Synced: 2025-01-11T00:08:54.345Z (12 months ago)
- Language: JavaScript
- Size: 22.5 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```
Webpack App
/* Loader's styles here. Default loader display a simple blinking text.*/
```
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.