Glob many html files with webpack html-loader?

Question

I'm trying to hash and optimize my images within HTML files that are generated by the static site generator Hugo.

I can get html-loader to process files one at a time, using a test config of:

entry: {
        main: './entry.js'
    },
    module: {
        rules: [
            { test: /\.jpg$/, use: [ "file-loader" ] },
            { test: /\.png$/, use: [ "file-loader" ] },
            { test: /\.html$/, use: ExtractTextPlugin.extract("html-loader") }
        ]
    },
    output: {
        publicPath: "./",
        filename: 'test.bundle.js'
    }

and entry.js is simply:

require('./test.html');

containing:

<img src="test.png" data-src="test.png" >

This works great! I get an HTML file with a hashed image source and the image itself is hashed.

What I really want to do, is to be able to glob a directory of HTML files and achieve a similar result.

I have tried things along the lines of:

const glob = require('glob');

glob.sync( "./*.html" ).forEach( function( file ) {
  require( path.resolve( file ) );
});

To no avail.

I've been digging and digging and I can't seem to find the answer. Any ideas appreciated!

Answer 1

Turns out you can pass an object to Webpack as entry points. So all you have to do is glob the files you want, and convert it to an object and use that object as your entry.