Pass variables to different template/entries

Hey there, I've got 3 different .mustache files (index.mustache, work.mustache and about.mustache) and I'm trying to pass different variables to those 3 entries from my webpack.common.js. (Let's say I want my title to change and say Hello Index in Index, Hello About in About and Hello Work in Work, for example). For this, this is my typical folder stucture:

+--js
+--scss
+--img
|   index.mustache
|   about.mustache
|   work.mustache

I've got the same lines in both index, about and work .mustache:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
   <h1>{{title}}</h1>
</body>
</html>

and here's my webpack.common.js

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const currentTask = process.env.npm_lifecycle_event;
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

    entry: {
        main: './src/js/home.js',
        about: './src/js/about.js',
        work: './src/js/work.js',
    },

    module:{
        rules: [
            //rule for JS
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use:'babel-loader'
            },
            {
                test: /\.mustache$/,
                loader: 'mustache-loader',
                options: {
                    tiny: true,
                    render: {
                        title: 'hello Index',
                    },
                },
            } ,

            //Vue Loader
            { 
                test: /\.vue$/, 
                use: 'vue-loader'
            },

           //rule for img 
           {
            test: /\.(png|svg|gif|jpg)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "img/",
                        publicPath: './img/'
                    }
                },
            ],
        },

         // // PDF Loader
         {
            test: /\.(pdf)$/,
            use: {
                loader: 'file-loader',
                options:{
                    name: '[name].[ext]',
                    outputPath: "files/",
                    publicPath: './files/'  
                }
            },
        },

        // // Assets Loader
        {
            test: /\.(mp4|mov|avi|wmv|webm)$/,
            use: {
                loader: 'file-loader',
                options:{
                    name: '[name].[hash].[ext]',
                    outputPath: "video/",
                    publicPath: './video/'
                }
            },
        },

        // Font Loader
        {
            test: /\.(woff|woff2|svg)$/,
            exclude: [path.resolve(__dirname, './src/img/')],
            use: {
                loader: 'file-loader',
                options:{
                    name: '[name].[ext]',
                    limit: 4096,
                    mimetype: "application/font-woff",
                    outputPath: 'css/fonts/',
                    publicPath: './css/fonts/',  
                }
            },
        }

        ],
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: './index.html',
            template: './src/index.mustache',
            inject: 'body',
            chunks: ['main'],
        }),
        new HtmlWebpackPlugin({
            filename: './about.html',
            template: './src/about.mustache',
            inject: 'body',
            chunks: ['about'],
        }),
        new HtmlWebpackPlugin({
            filename: './work.html',
            template: './src/work.mustache',
            inject: 'body',
            chunks: ['work']
        }),
    ],

    resolve: {
        alias: {
            '@scss': path.resolve(__dirname, 'src/scss'),
            '@img': path.resolve(__dirname, 'src/img'),
            '@': path.resolve(__dirname, 'src')
        }
    }

}

Please pay attention to this part:

{
                test: /\.mustache$/,
                loader: 'mustache-loader',
                options: {
                    tiny: true,
                    //I want this part to be used differently for each page 
                    render: {
                        title: 'hello Index',
                    },
                },
}

I know I could write as many rules as number of mustache pages I have, but I'm wondering whether data can be passed to the template through each HtmlWebpackPlugin declaration, instead of through the rule.

Thank in advance 👌🏽

mustache / mustache.github.com

Pass variables to different template/entries #137