我如何在 TailwindCSS 模板中散列 CSS 类以防止在 Webpack 工作流程中进行复制

Question

我正在为我的 Web 项目使用 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,
  },
};

Answer 1

即使我面临问题，任何人都可以尝试解决这个问题吗？

问候 约翰·史密斯 尼奥波利斯旅