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

Question

我有问题，删除webpack 4中未使用的CSS。它似乎大多数CSS净化插件依赖于提取文本插件，没有更新版本4。

这是我的命令：

节点_模块/..bin/webpack--模式=开发--env.Operation=分离式mode

或

节点_模块/..bin/webpack--模式=开发--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