How can I convert classNames in HTML into hashed classNames in a VITE configuration with multiple pages?
add a comment
1 Answer
To convert classNames in HTML into hashed classNames in a VITE configuration with multiple pages, you can follow these steps:
- Install the
posthtml-hashplugin:
npm i posthtml-hash --save-dev
- Create a
posthtml.config.jsfile with the following contents:
const posthtmlHash = require("posthtml-hash");
module.exports = {
plugins: [
posthtmlHash({
selector: "[class]",
algorithm: "md5",
hashLength: 8,
manifest: "./dist/assets/hash-manifest.json",
}),
],
};
- In your VITE configuration file, add the
Htmlplugin and configure it to use theposthtml.config.jsfile:
// vite.config.js
import { defineConfig } from "vite";
import { createHtmlPlugin } from "vite-plugin-html";
export default defineConfig({
plugins: [
createHtmlPlugin({
template: "public/index.html",
filename: "index.html",
minify: true,
inject: true,
hash: true,
posthtml: {
plugins: require("./posthtml.config"),
},
}),
createHtmlPlugin({
template: "public/page1.html",
filename: "page1.html",
minify: true,
inject: true,
hash: true,
posthtml: {
plugins: require("./posthtml.config"),
},
}),
// more pages here
],
});
- Add the following code to your HTML templates where you want to use hashed classNames:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="my-class">Hello World</div>
...
<script src="/assets/main.js"></script>
<% if (htmlWebpackPlugin.options.hash) { %>
<script>window.__HASH_MANIFEST__ = <%= JSON.stringify(htmlWebpackPlugin.options.hash) %>;</script>
<% } %>
</body>
</html>
This will automatically hash the classNames in your HTML and update the references in your CSS and JavaScript files. The hashed classNames will be stored in a hash-manifest.json file in the ./dist/assets/ directory.
Your Answer
Stats
Asked: 2022-01-14 11:00:00 +0000
Seen: 9 times
Last updated: Dec 27 '21