Why are there so many inline styles of < style > in < head > in webpack3.X production environment? ExtractTextPlugin has been used.

webpack"s code for css packaging is as follows

rules: [{
    test: /\.scss$/,
    include: PATH_OPTION.APP,
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: [
        {
          loader: "css-loader",
          options: {
            importLoaders: 2,
            minimize: true,
          },
        },
        {
          loader: require.resolve("postcss-loader"),
          options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: "postcss",
            plugins: () => [
              require("postcss-flexbugs-fixes"),
              autoprefixer({
                browsers: [
                  ">1%",
                  "last 4 versions",
                  "Firefox ESR",
                  "not ie < 9", // React doesn"t support IE8 anyway
                ],
                flexbox: "no-2009",
              }),
            ],
          },
        },
        {
          loader: "sass-loader",
        },
      ],
    }),
  },
  {
    test: /\.css$/,
    use: [
      require.resolve("style-loader"),
      {
        loader: require.resolve("css-loader"),
      },
    ],
  }]

plugins: [
    new ExtractTextPlugin({
        filename: "css/[name].[contenthash:7].css",
        disable: env !== "production"
    }),
]
Mar.23,2021


< html >
< head >

<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
    h2{
        color: red;
        font-size: 30px;
    }
</style>

< / head >
< body >

<h2>CSS</h2>
<h2>CSS</h2>    

< / body >
< / html >

Menu