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

Question

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

然后突然之间，当脚本启动时，样式就出现了。

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

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

Answer 1

您可以尝试使用extract-text-webpack-plugin将 css 分解到他们自己的文件中。这样，您可以<link>自己将标签添加到您希望在加载 JS 之前加载其样式的那些页面。将样式表视为单独的捆绑包。

Answer 2

对于 webpack v4，mini-css-extract-plugin应该使用extract-text-webpack-plugin( source ) 代替。他们的README中有使用示例。