为什么 Tailwind 中的 Purge 选项不适用于 Webpack

Question

我使用 Tailwind 设置了 Webpack，除了清除之外，一切似乎都运行良好。该文件为 4mb，我可以在其中看到所有的顺风实用程序类。在过去的 30 分钟里，我试图找到解决方案，但没有任何效果。

这是我的 package.json 脚本“build”和所有依赖项：

{
 "name": "MemeGenerator",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --config webpack.prod.js",
   "watch": "webpack --watch --config webpack.dev.js"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/MB9900/MemeGenerator.git"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "bugs": {
   "url": "https://github.com/MB9900/MemeGenerator/issues"
 },
 "homepage": "https://github.com/MB9900/MemeGenerator#readme",
 "devDependencies": {
   "autoprefixer": "^10.2.5",
   "css-loader": "^5.1.3",
   "html-webpack-plugin": "^5.3.1",
   "postcss": "^8.2.8",
   "postcss-cli": "^8.3.1",
   "postcss-loader": "^5.2.0",
   "style-loader": "^2.0.0",
   "tailwindcss": "^2.0.3",
   "webpack": "^5.26.0",
   "webpack-cli": "^4.5.0",
   "webpack-dev-server": "^3.11.2",
   "webpack-merge": "^5.7.3"
 }
}

这是 webpack.common

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                include: path.resolve(__dirname, 'src/css'),
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }
        ]
    }
};

这是 webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = merge(common, {
    mode: 'production',
    output: {
        filename: '[name].[contenthash].js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.[contenthash].html',
            template: 'src/html/index.html'
        })
    ],
});

这是 postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

最后：tailwind.config.js

module.exports = {
    purge: {
        enable: true,
        content: [
            './src/**/*.html',
            './src/**/*.js'
        ]
    },
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
    extend: {},
    },
    plugins: [],
  };

Answer 1

似乎“NODE_ENV”未设置为“生产”。我试图在 tailwind.config.js 中使用“enable: true”修复这个问题，但是它是enabled: true。现在它工作正常。