Setup to force CSS to load before JavaScript

Question

I use webpack for my project. I am having issues configuring this plugin in 'production' mode. The CSS bundle is not generated. For this purpose, I used MiniCssExtractPlugin in my webpack.prod.js to create an HTML file and JS. As a result, CSS is loading after the JavaScript in the browser, and then I got some ugly style issues in the first seconds on page load. In my project I use "scss".

My webpack.prod.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');

    module.exports = {
      //   devtool: '',
      entry: {
        index: ['@babel/polyfill', './src/js/index.js'],
        aboutUs: ['@babel/polyfill', './src/js/aboutUs.js'],
        offer: ['@babel/polyfill', './src/js/offer.js'],
        price: ['@babel/polyfill', './src/js/price.js'],
        contact: ['@babel/polyfill', './src/js/contact.js'],
      },
      plugins: [
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
        new HtmlWebpackPlugin({
          title: 'empty',
          filename: 'index.html',
          template: './src/index.html',
          chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
          title: 'empty',
          filename: 'aboutUs.html',
          template: './src/pages/aboutUs.html',
          chunks: ['aboutUs'],
        }),
        new HtmlWebpackPlugin({
          title: 'empty',
          filename: 'offer.html',
          template: './src/pages/offer.html',
          chunks: ['offer'],
        }),
        new HtmlWebpackPlugin({
          title: 'empty',
          filename: 'price.html',
          template: './src/pages/price.html',
          chunks: ['price'],
        }),
        new HtmlWebpackPlugin({
          title: 'empty',
          filename: 'contact.html',
          template: './src/pages/contact.html',
          chunks: ['contact'],
        }),
        new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: '[id].css',
        }),
        new webpack.DefinePlugin({
          'process.env': {
          },
        }),
      ],
      output: {
        filename: '[name].[hash:20].js',
        path: path.resolve(__dirname, 'dist'),
      },
    
      module: {
        rules: [
          {
            test: /.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
          },
          {
            test: /.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
          },
          {
            test: /.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
          },
          {
            test: /.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
        ],
      },
      optimization: {
        splitChunks: {
          chunks: 'all',
        },
      },
    };

My package.json:

  {
      
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "start": "webpack serve --config webpack.dev.js --mode development --open chrome.exe",
        "build": "webpack --config webpack.prod.js --mode production"
      },
      "devDependencies": {
        "@babel/core": "^7.12.7",
        "@babel/preset-env": "^7.12.7",
        "babel-loader": "^8.2.1",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^5.0.1",
        "file-loader": "^6.2.0",
        "html-loader": "^1.3.2",
        "html-webpack-plugin": "^4.5.0",
        "mini-css-extract-plugin": "^1.3.3",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "sass": "^1.29.0",
        "sass-loader": "^10.1.0",
        "style-loader": "^2.0.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "webpack": "^5.6.0",
        "webpack-cli": "^4.2.0",
        "webpack-dev-server": "^3.11.0"
      },
      "dependencies": {
        "@babel/polyfill": "^7.12.1",
        "@fortawesome/fontawesome-free": "^5.15.1",
        "emailjs-com": "^2.6.4",
        "lodash": "^4.17.20"
      },
      "browserslist": [
        "last 1 version",
        "> 1%",
        "IE 10"
      ]
    }

Answer 1

Isn't exist a technic for loading css before javascript on the modern browsers such as Chrome, Brave, Microsoft Edge.

The recommendation to include the CSS before JS is invalid for the modern browsers. Put CSS wherever you like, and put JS towards the end, as possible.

For old browsers such as Firefox or Internet Explorer keep putting css on top (if you don't want to show a naked but interactive page first).