如何使用webpack 4删除未使用的CSS？

Question

我在删除webpack 4中未使用的CSS时遇到问题.似乎大多数CSS纯化插件都依赖于提取文本插件,该插件未针对版本4进行更新.

这是我的命令:

node_modules/.bin/webpack --mode = development --env.operation = separateCSS

要么

node_modules/.bin/webpack --mode = development --env.operation = bundleCSS

这是我的webpack.config.js的一部分:

            rules: [
            // Loader for SASS files
            {
                test: /\.s[ac]ss$/,
                use: [
                    // Use IIFE to choose how to emit the CSS: 1. Extract as separate file 2: Bundle with the JS file
                    (() => { return env.operation == "separateCSS" ? MiniCssExtractPlugin.loader : 'style-loader'; })(),
                    { loader: 'css-loader', options: { importLoaders: 1, url: true } },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                // Write future-proof CSS and forget old preprocessor specific syntax. Use the latest CSS syntax today with cssnext. 
                                // It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
                                // It parses CSS and add vendor prefixes to CSS rules using values from Can I Use.
                                // https://github.com/MoOx/postcss-cssnext
                                require('postcss-cssnext')()
                            ]
                        }
                    },
                    'sass-loader'
                ]
            }
           ],
            plugins: [
            new MiniCssExtractPlugin({
                filename: "../css/[name].css"
            })
           ]

有谁知道如何修改我的配置文件,以便webpack可以删除未使用的CSS？

Answer 1

您是否考虑过使用名为uncss的东西。有一个 webpack 插件。它将查看您的所有 CSS 并将其与您的 HTML 进行比较，并删除您不使用的任何内容。

看看：WebPack UnCSS