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

【问题标题】：How to remove unused CSS using webpack 4?如何使用 webpack 4 删除未使用的 CSS？
【发布时间】：2018-09-14 08:52:13
【问题描述】：

我在删除 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 吗？

【问题讨论】：

最好的解决方案是停止使用未使用的 CSS
我正在加载一些类似于 bootstrap 的内部品牌 CSS 文件。但大多数时候，很多部分都没有使用。所以我需要一种方法来省略多余的部分。
已经有一个用于提取文本插件的测试版，适用于 webpack 4。如果你没有找到其他东西，也许这是一个选择。 github.com/webpack-contrib/extract-text-webpack-plugin/releases/…
试试 purge-css-webpack-plugin - github.com/FullHuman/purgecss-webpack-plugin - 这大大缩小了我的 css 文件并且很容易实现。
@bilcker 他们将其分叉到：github.com/FullHuman/purgecss

标签： css webpack webpack-4 mini-css-extract-plugin

【解决方案1】：

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

看一看：WebPack UnCSS

【讨论】：