Html Web Pack Plugin inject hash css into html

Question

I am trying to inject css file into my index.html. Currently my web pack does the following

1. Converts my SASS into CSS
2. Name the css file with hash (e.g. optionA-32d6cb.css)
3. Places into ./dist folder

output of the folder structure:

- Dist
   - OptionA
        - optionA-hash.css

   - OptionB
        - optionB-hash.css

   - index.html //How to inject above css into this file?

I am new to HtmlWebpackPlugin my question is how do i inject above dynamic css files into the index.html? so that in the head section i have the following:

<link href="optionA-32d6cb.css" rel="stylesheet">
<link href="optionB-w2d6cb.css" rel="stylesheet">

My webpack.config.js file:

module.exports ={
entry: ['path_to_scss_file'],// SASSfile which contains import statment with wildcard to get all sass in given directory
output: {
    filename: "[name].min.js",
    path: path.resolve(__dirname, 'dist/'),
},
plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
],
module:{
    rules: [
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options:{
                        name:'[name]/[name]-[contenthash].css',
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                      sassOptions: {
                             importer: globImporter(), 
                     //my sass files uses wildcard to import all sass files
                      },
                     },
                }
            ]
        }
    ]
}

Answer 1

You can use webpack-manifest-plugin to solve this issue which will create a manifest.json file inside the dist/ folder.

The manifest.json file will contain all the mappings like this

{
    "app.css": "css/app.dc4d6b6c65b4f5ff351e.css"
}

and then use HtmlWebpackPlugin, it will do the job every time you build, it will inject the correct files to index.html by referring to manifest.json

Refer https://github.com/anandgupta193/react-enterprise-starter-kit for an exact working implementation in webpack/webpack.common.config.js file. (use node 12.x to create a build in the starter kit)

Note: Remove your scripts and link tags from the index.html template, it will get injected automatically.

Answer 2

The value of entry should be a path to a .js file: docs

And I recommend to use mini-css-extract-plugin. It will extract your CSS into separate files

Then your webpack.config could look like this:

'use strict';

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    app: './main.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash].js',
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
    }),
  ],
};

main.js

import './style.scss';

style.scss

body {
  background: #fefefe;
}

If you want your css files in a special path in your /dist folder, you can define options for the plugin