20

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

4

1 回答 1

2

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

看一看：WebPack UnCSS

于 2020-11-10T23:08:31.483 回答