解决mini-css-extract-plugin遇到的"document is not defined"问题

在使用mini-css-extract-plugin插件进行CSS提取时，有时会遇到”document is not defined”的错误。这个错误通常发生在服务器端渲染（SSR）或类似的环境中，因为在这些环境中，document对象是不存在的。

问题的原因：

mini-css-extract-plugin插件依赖于document对象来解析HTML，从而提取其中的CSS。在服务器端渲染的环境中，由于没有document对象，插件无法正常工作。

解决方案：

1. 使用服务器端渲染（SSR）：如果你正在使用客户端渲染（CSR），尝试切换到服务器端渲染（SSR）。在SSR环境中，document对象是存在的，因此可以正常提取CSS。
2. 使用其他插件：如果你无法切换到SSR环境，可以考虑使用其他插件来提取CSS。例如，mini-css-extract-plugin的替代品包括optimize-css-assets-webpack-plugin和css-loader。
3. 修改插件配置：如果你仍然想使用mini-css-extract-plugin，可以尝试修改插件的配置。在插件的选项中，找到与HTML解析相关的部分，并尝试禁用或修改它。这可能需要一些试验和错误，因为具体的配置选项可能因版本而异。
4. 使用条件语句：在代码中添加条件语句，根据环境是否提供document对象来决定是否提取CSS。例如，你可以检查process.env.NODE_ENV是否为'production'，并在这种情况下提取CSS。

示例代码：

if (process.env.NODE_ENV === 'production') {
  // 提取CSS的代码
} else {
  // 不提取CSS的代码
}

注意事项：

• 在使用其他插件时，请确保它们与你的项目配置和需求兼容。
• 修改插件配置可能会影响其性能或功能，因此请谨慎操作。
• 使用条件语句可以避免在非生产环境中出现错误，但可能会导致额外的计算开销。

总结：
解决mini-css-extract-plugin遇到的”document is not defined”问题需要根据你的项目配置和需求选择合适的解决方案。你可以考虑使用服务器端渲染、其他插件、修改插件配置或使用条件语句来避免这个错误。