没有样式的 CSS 页面加载的 Webpack 行为然后闪烁答案

【问题标题】：Webpack behavior with css page loads without style then flashes没有样式的 CSS 页面加载的 Webpack 行为然后闪烁
【发布时间】：2015-10-06 09:59:30
【问题描述】：

因为我使用 Webpack 来捆绑我的 css 并且我的脚本标签位于我的 HTML 的底部，所以在初始页面加载时，我得到的页面内容没有任何样式。

然后在脚本启动时突然出现样式。

Webpack 在帮助捆绑 CSS 方面非常有用，但这种行为非常令人不安，并且无法真正接受。

解决这个问题的常用方法是什么？

【问题讨论】：

【解决方案1】：

您可以尝试使用 extract-text-webpack-plugin 将 css 分解到自己的文件中。这样，您可以自己将<link> 标签添加到您希望在加载 JS 之前加载其样式的页面。见stylesheets as separate bundle。

【讨论】：

【解决方案2】：

对于 webpack v4，应使用 mini-css-extract-plugin 而不是 extract-text-webpack-plugin (source)。在他们的README上有使用示例。

【讨论】：