CODEWITHSUNDEEP
reactjswebpackhtml-webpack-pluginextracttextwebpackpluginmini-css-extract-plugin
esausilva
esausilva

Reputation: 2116

How to append extracted CSS file to HTML template in Webpack 4

When I use extract-text-webpack-plugin, the extracted single CSS file appends itself to my index.html when creating the production build. However, I just switched to mini-css-extract-plugin and when I build for production the extracted single CSS file is not getting appended to my index.html.

This is the output produced by extract-text-webpack-plugin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>
  <style>
    .ui.sidebar {
      overflow-y: visible !important;
    }
  </style>
  <title>profile updater</title>
<link rel="shortcut icon" href="/favicon.ico"></head>
<link rel="stylesheet" href="styles.c2c25cc46364fe37aad1.css">

<body>
  <div id="root"></div>
<script src="/static/vendor.c2c25cc46364fe37aad1.js"></script><script src="/static/app.c2c25cc46364fe37aad1.js"></script></body>

</html>

And notice the output when I use mini-css-extract-plugin, it does not have the style sheet appended

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>
  <style>
    .ui.sidebar {
      overflow-y: visible !important;
    }
  </style>
  <title>profile updater</title>
<link rel="shortcut icon" href="/favicon.ico"></head>

<body>
  <div id="root"></div>
<script src="/static/vendor.c2c25cc46364fe37aad1.js"></script><script src="/static/app.c2c25cc46364fe37aad1.js"></script></body>

</html>

This is mini-css-extract-plugin configuration

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              camelCase: true,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  autoprefixer: {
                    browsers: 'last 2 versions'
                  }
                }
              }
            }
          }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'
    })
    new MiniCssExtractPlugin({
      filename: 'styles/styles.[hash].css',
      chunkFilename: 'styles/styles.[hash].css'
    })
  ]

Do I need to add some other configuration to append the extracted CSS file to index.html? Maybe an extra config in html-webpack-plugin?

Upvotes: 0

Views: 1074

Answers (0)

Related Questions