Webpack 4 - Add Css File To Multiple Html Files

I want to bundle a couple of html files and add one css files into all of them. But my webpack configuration add only css and js bundled files to index.html My files looks like thi

Solution 1:

You can add multiple instances of the HtmlWebpackPlugin, one for each of your html files:

plugins: [
  new webpack.ProgressPlugin(),

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
  }),

  new HtmlWebpackPlugin({
    filename: 'about.html',
    template: './src/about.html'
  }),

  new HtmlWebpackPlugin({
    filename: 'contact.html',
    template: './src/contact.html'
  }),

  new MiniCssExtractPlugin({
    filename: '[name].[hash:8].css'
  }),

  new CleanWebpackPlugin()
],

This should inject the JS and CSS files into each html file.