Webpack File/Image loader for images in .ejs template

Question

Looks I am missing a setting for loading images in webpack configuration if the image tag is within my index.ejs template.

All my images in my html files in my project get properly renamed and load fine during my build, but the image tag in the .ejs file gets ignored.

i.e in my .ejs if I have <img src="../../home.png"> it remains that way, but in normal html file it changes to <img src="12345677.png">

My current loaders :

loaders: [
            //HTML Files
            {
                test: /\.html$/,
                loader: 'html'
            },
            //Transpile ES6 to ES5
            {
                test: /\.js$/,
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: [
                        ["es2015", {"module": false}]
                    ]
                }

            },
            //Extract Normal CSS
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer', publicPath: "../"})

            },
            //Bundle Less into CSS Code
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer!less?sourceMap', publicPath: "../"})
            },
            //Images
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file'
            }
        ]

and important plugins :

plugins.push(
            new HtmlWebpackPlugin({
                hash: true,
                filename: 'index.html',
                template:  './src/index.ejs',
                favicon: './src/favicon.ico',
                inject : false
            }),
            // Write out CSS bundle to its own file:
            new ExtractTextPlugin({
                filename: 'css/[contenthash].styles.css',
                allChunks: true
            }),
        );

Answer 1

Just to provide an updated answer. In Webpack 4, you can load images in .ejs files without html-loader.

Change your src attribute in your img tags to:

<!-- index.ejs -->
<img src="<%= require('../../home.png') %>" alt="image text">

Enable CommonJS module syntax with esModule: false

// webpack.config.js
module: {
  rules: [
    ...,
    test: /\.(png|jpg|etc)$/,
    use: [{
      loader: "file-loader", // or url-loader
      options: {
        ...,
        esModule: false,
      }
    }]
  ]
}

If you wish to use variables with require, you may need to change the syntax, see this other SO question and this example on Github:

// webpack.config.js
new HtmlWebpackPlugin({
    image: '/path/to/image.png',
})

<!-- index.ejs -->
<img src="<%=require('html!./' +htmlWebpackPlugin.options.image + '.html' ) %>" alt="image text">

Answer 2

I think ejs has no image loader support

You can try this link underscore-template loader to load the image files as suggested by author in this thread

The other loader for the webpack includes ejs-loader