Problem with html-loader and mustache

[elisabetperez]

My html-loader is having issues with mustache. I added an option for images to have hash and also for videos to have hash in my webpack.common.js. The output for the videos and for the images is correct in the /dist folder - the hash is there, but my output code does not have the hash.

Here is my folder structure:

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

And my webpack.common.js configuration:

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'
            },
            //rule for html
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            //rule for mustache files
            {
                test: /\.mustache$/,
                loader: 'mustache-loader',
                options: {
                    tiny: true,
                    render: {
                        title: 'hello Index',
                        subtitle: 'this is a subtitle',
                    },
                },
            } ,
            //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/'
                        }
                    },
                ],
            },
         // // rule for pdf files
            {
                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')
        }
    }

}

I don't want to remove the hashes from the images and videos, so I wonder what else can I do. Thank you!

[Rayhan545430]

My html-loader is having issues with mustache. I added an option for images to have hash and also for videos to have hash in my webpack.common.js. The output for the videos and for the images is correct in the /dist folder - the hash is there, but my output code does not have the hash.

Here is my folder structure:

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

And my webpack.common.js configuration:

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'
            },
            //rule for html
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            //rule for mustache files
            {
                test: /\.mustache$/,
                loader: 'mustache-loader',
                options: {
                    tiny: true,
                    render: {
                        title: 'hello Index',
                        subtitle: 'this is a subtitle',
                    },
                },
            } ,
            //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/'
                        }
                    },
                ],
            },
         // // rule for pdf files
            {
                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')
        }
    }

}

I don't want to remove the hashes from the images and videos, so I wonder what else can I do. Thank you!

[jgonggrijp]

This looks like a support request for mustache-loader. If still relevant and you have not already done so, please take it to https://github.com/deepsweet/mustache-loader/issues.