load styles before javascript - webpack 4
Easiest fix would be to include a small bit of CSS in your pug template that hides the <body>
. And then include a line of JS to unhide the <body>
before your animations start.
EDIT: if you would like to load your CSS file separately from your JS bundle, use the https://github.com/webpack-contrib/mini-css-extract-plugin. In your template, include a <link>
tag to the public path of your generated CSS file.
This is happening because you're bundling with style-loader, which puts your CSS as a string inside your Javascript bundle.
So the HTML will render (very fast) while the browser is parsing your JS bundle (very slow). Towards the end of that bundle, the browser will find the module containing your CSS string. Then it'll parse that and apply the styles with Javascript.