title: load styles before javascript - webpack 4
body: <p>My JavaScript is loading before my styles, which is causing a jump and odd load.</p>
  
  <p>Here is my demo: <a href="https://harp29.github.io/cb-pc/" rel="noreferrer">https://harp29.github.io/cb-pc/</a></p>
  
  <p>How do I get the styles/css file to load before the JavaScript file runs via webpack? I tried <code>setTimeout</code> function and it works but this is a temporary solution, that is the best way to tackle this issue?</p>
  
  <p>My webpack file: webpack.dev.js</p>
  
  <pre><code>const path = require("path")
  const webpack = require("webpack")
  const HTMLWebpackPlugin = require("html-webpack-plugin")
  // const cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];
  
  module.exports = {
    entry: {
      main: [
        "webpack-hot-middleware/client?reload=true",
        "./src/script/main.js"
      ]
    },
    mode: "development",
    output: {
      filename: "[name]-bundle.js",
      path: path.resolve(__dirname, "../dist"),
      publicPath: "/"
    },
    devServer: {
      contentBase: "dist",
      overlay: true,
      stats: {
        colors: true
      }
    },
    devtool: "source-map",
    module: {
      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: [{
            loader: "babel-loader"
          }]
        },
        {
          test: /\.css$/,
          use: [{
              loader: "style-loader"
            },
            {
              loader: "css-loader"
            }
          ]
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
        },
        {
          test: /\.(jpeg|jpg|png|svg)$/,
          use: [{
            loader: "file-loader",
            options: {
              name: "images/[name].[ext]"
            }
          }]
        },
        {
          test: /\.html$/,
          use: [{
            loader: "html-loader"
          }]
        },
        {
          test: /\.pug$/,
          use: [{
            loader: "pug-loader"
          }]
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new HTMLWebpackPlugin({
        template: "./src/pug/index.pug",
        title: "Cervini Bhatia PC",
        inject: true
      })
    ]
  }
  </code></pre>
  
  <p>my main.js file:</p>
  
  <pre><code>const scss = require('../scss/style.scss');
  import index from '../pug/index.pug';
  import favicon from '../images/favicon.png';
  import logoSymbol from '../images/logo-symbol.svg';
  import IntroAnimations from './module/IntroAnimations';
  
  //Instaniate
  new IntroAnimations()
  .animateTimelines();
  </code></pre>
  
  <p>my index.pug file:</p>
  
  <pre><code>doctype html
  html
    head.
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Welcome - Cervini Bhatia PC&lt;/title&gt;   
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="shortcut icon" type="image/png" href="/images/favicon.png"&gt;
    body   
      include ./modules/_loading.pug
      include ./modules/_landing.pug
      include ./modules/_team-section.pug
      include ./modules/_experience.pug
      include ./modules/_firm.pug
      include ./modules/_communication.pug
      include ./layout/_footer.pug
  </code></pre>