Как я могу хешировать классы CSS в шаблонах TailwindCSS, чтобы предотвратить копирование в рабочем процессе Webpack ⇐ CSS

[Anonymous]

Я использую шаблоны TailwindCSS для своих веб-проектов и хочу автоматически скрывать классы CSS в своем проекте, чтобы предотвратить копирование. Есть ли способ добиться этого? Кроме того, я хочу, чтобы выходной файл, содержащий классы HTML, был хеширован в каталоге dist. Буду признателен, если кто-нибудь предоставит рекомендации.
Пример:
https://uideck.com/
https://go-tailwind.preview.uideck .com
const fs = require("fs");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const folderPath = path.resolve(__dirname, "src/html");
const packageJSON = require("./package.json");
const CopyPlugin = require("copy-webpack-plugin");
const htmlFiles = fs
.readdirSync(folderPath)
.filter((file) => path.extname(file) === ".html");

const htmlPlugins = htmlFiles.map((htmlFile) => {
return new HtmlWebpackPlugin({
template: path.resolve(folderPath, htmlFile),
filename: htmlFile,
minify: {
collapseWhitespace: true,
conservativeCollapse: true,
preserveLineBreaks: true,
useShortDoctype: true,
html5: true,
},
meta: {
viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
},
});
});

module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
},
{
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
svgoConfig: {
plugins: {
removeViewBox: false,
},
},
},
},
],
},
],
},
plugins: [...htmlPlugins],
devServer: {
static: {
directory: path.join(__dirname, "dist"),
},
compress: true,
port: 9000,
},
};



Подробнее здесь: https://stackoverflow.com/questions/782 ... -in-a-webp