Webpack 4 - Add css file to multiple html files

Question

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 this:

I want to add this main-hash.js and main-hash.css to all HTML files: about.html, index.html, contact.html

Also when I exclude index.html (comment below) from file-loader my index.html don't recognize paths for public folder /images. Any ideas ??

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

module.exports = {
  mode: 'development',
  entry: './src/main.js',

  output: {
    filename: '[name]-[hash:8].js',
    path: path.resolve(__dirname, 'dist')
  },

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

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

  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        include: [path.resolve(__dirname, 'src')],
        loader: 'babel-loader',

        options: {
          plugins: ['syntax-dynamic-import'],

          presets: [
            [
              '@babel/preset-env',
              {
                modules: false
              }
            ]
          ]
        },
        exclude: '/node_modules/'
      },
      {
        test: /\.(png|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: './src/images',
              outputPath: './assets',
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].html'
            }
          },
          { loader: 'extract-loader' },
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src']
            }
          }
        ],
        // HERE 
        exclude: path.resolve(__dirname, './src/index.html')
      },

      {
        test: /\.sass$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        }
      },

      chunks: 'async',
      minChunks: 1,
      minSize: 30000,
      name: true
    }
  },

  devServer: {
    open: true
  }
};

Just link to the css files in the html or they can be imported in your main.js — Ace
– Ace, Commented Jun 21, 2019 at 18:11

Steve Holgado · Accepted Answer · 2019-06-22 17:04:55Z

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.

answered Jun 22, 2019 at 17:04

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack 4 - Add css file to multiple html files

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related