inject-skeleton-webpack-plugin
This is a plugin to help webpack inject skeleton element and CSS asset into html.
install
npm install inject-skeleton-webpack-plugin
Usage
Step 1: configration
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { SkeletonPlugin } = require("inject-skeleton-webpack-plugin");
const path = require("path");
const webpackConfig = {
entry: "index.js",
output: {
path: __dirname + "/dist",
filename: "index.bundle.js",
},
plugin: [
new HtmlWebpackPlugin({
// Your HtmlWebpackPlugin config
}),
new SkeletonPlugin(
HtmlWebpackPlugin, //require html-webpack-plugin
{
pathname: path.resolve(__dirname, `${customPath}`), // the path to store shell file
staticDir: path.resolve(__dirname, "./dist"), // the same as the `output.path`
routes: ["/", "/search"], // Which routes you want to generate skeleton screen
}
),
],
};
🌟The name of the route must be the same as the name of the shell file. For example, '/' -> app.html, '/search' -> search.html
🌟You can use this tool to generate a skeleton screen: https://chromewebstore.google.com/detail/page-web-skeleton/nfbfgaldeonhcepgjpaboikblamoodea
Step 2: Modify template index.html
Add comment <!-- shell -->in the root element of you application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- shell -->
</div>
</body>
</html>
