CODEWITHSUNDEEP
webpackwebpack-style-loader
rpivovar
rpivovar

Reputation: 3438

Webpack Mini CSS Extract Plugin - What's the point of extracting CSS?

I'm using the Mini CSS Extract Plugin to split my CSS into its own file in my dist folder of my webpack project.

My webpack.config.js file looks like this:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
};

When I npm run build, this builds the file style.css in my dist folder, which is identical to my style.css file in my src folder. I have to include

<head>
  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

in the head of index.html in the dist folder for this to work. So my question is - what's the point of extracting the CSS like this? If the style.css file in the src folder is identical to the style.css file in the dist folder, and I have to include 

<link rel="stylesheet" type="text/css" href="style.css" />

in the head of my HTML, I don't understand what the advantage is of doing things this way, even though the Webpack Documentation states

Note that you can, and in most cases should, split your CSS for better load times in production.

Upvotes: 7

Views: 6407

Answers (1)

Saqubar Sadique
Saqubar Sadique

Reputation: 105

This allows to cache CSS.
You can also get a Flash of Unstyled Content (FOUC).
FOUC happens because the browser takes a while to load JavaScript and the styles would be applied only then.
Separating CSS to a file of its own avoids the problem by letting the browser to manage it separately.

Upvotes: 8

Related Questions