Html-webpack-plugin: html-loader won't work properly

[Turanchoks]

So I want to use html-loader with the plugin and I just add

    new HtmlWebpackPlugin({
        template: 'html!src/index.html',
        inject: 'body',
        chunk: 'app'
    })

And my html contains <img src="logo.png">. When I try to build I get the

Module not found: Error: Cannot resolve 'file' or 'directory' ./\""

But when I wrap logo.png with single quotes or just append it to the image name it will start looking for it.

Module not found: Error: Cannot resolve 'file' or 'directory' ./\"'logo.png\"

I assume it's a problem with html-loader but it works as a common loader to require other html files. Any ideas what causes that weird behavior? Thanks

[jantimon]

Could you please show us your entire configuration?

[Turanchoks]

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const src_path = path.join(__dirname, '/src');

module.exports = {
    context: src_path,

    entry: {
        app: './app.js'
    },

    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[hash].js',
        publicPath: '/'
    },

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            query: {
                presets: 'es2015',
            },
            loader: 'babel'
        }, {
            test: /\.scss$/,
            loader: 'style!css!sass'
        }, {
            test: /\.css$/,
            loader: "style!css"
        }, {
            test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
            loader: 'file'
        }, {
            test: /\.html$/,
            loader: 'html'
        }]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: 'html!' + path.join(src_path, 'index.html'),
            inject: 'head',
            chunk: 'app'
        })
    ]
};

It's not full but this won't build.

[jantimon]

Okay index.html is a html file and you specified a loader for html files:

{
            test: /\.html$/,
            loader: 'html'
        }

This causes the html loader to be executed twice.

The solution might be '!!html!' + path.join(src_path, 'index.html')

[wmadden]

Why not just omit the html!?

You can instead write <img src="<%= require('logo.png') %>" /> and assuming the image can be found everything should just work.

[SamanthaAdrichem]

Html loader indeed breaks if you use double quotes in for your src attribute. Use single quotes and it does work.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.