vue-cli - purgecss-webpack-plugin 打包删除无用样式导致输出 0KB的css空文件，怎么输出的时候消除空文件？

Question

vue-cli配置css的tree shaking，使用了purgecss-webpack-plugin这个插件，具体配置如下：

const PurgecssWebpackPlugin = require('purgecss-webpack-plugin')new PurgecssWebpackPlugin({    paths: glob.sync([            // 需要编译的文件夹路径            path.join(__dirname, './src/index.html'),                                          path.join(__dirname, './**/*.vue'),            path.join(__dirname, './src/**/*.js')     ])}]

打包之后，会出现，输出的一些css文件是0KB，应该怎么办呢？

尝试过使用splitChunks分包，但是没有效果，能不能配置输出的时候就删除这些空的文件呢？

Answer 1

purgecss-webpack-plugin 插件的目的是删除未使用的 CSS，如果它删除了所有 CSS，那么输出文件可能变成 0KB。这通常是因为没有 CSS 规则被实际使用，或者 purgecss-webpack-plugin 配置过于严格。

要消除这些空文件，你可以在 webpack 配置中使用 MiniCssExtractPlugin，该插件允许你控制提取的 CSS 文件的输出。你可以设置一个选项来忽略空文件。

下面是一个如何配置 MiniCssExtractPlugin 以忽略空文件的示例：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {  // ... 其他 webpack 配置  plugins: [    new MiniCssExtractPlugin({      filename: '[name].[contenthash].css',      ignoreOrder: true, // 忽略 CSS 中的顺序问题      chunkFilename: '[id].[contenthash].css',      onEmit: (assets, emission) => {        // 遍历所有 CSS 文件        Object.keys(assets).forEach(asset => {          if (asset.endsWith('.css') && assets[asset].source().length === 0) {            // 如果文件是空的，则从输出中删除它            delete assets[asset];          }        });        // 继续正常的发射过程        return emission;      },    }),    // ... 其他插件  ],  // ... 其他 webpack 配置};

在这个配置中，onEmit 钩子函数在 webpack 发射阶段被调用，它允许你修改输出文件。在这个函数中，我们检查每个 CSS 文件，如果它是空的（即文件内容为 0 字节），我们就从输出中删除它。

请注意，这种方法可能不是最佳解决方案，因为它会阻止空文件被输出。更好的方法是检查为什么 purgecss-webpack-plugin 删除了所有 CSS，并调整其配置或确保至少有一些 CSS 被实际使用。