Webpack html-loader returns full module definition

Question

Webpack, super cool and great, yay

also running it with grunt-webpack, omg so happy

whats more? some nice fellow made an inliner so I can require .html files, I sure am lucky

var html = require("html!./some_template.html");

only troublesome detail is that an html file containing

<h3><%= any_variable %></h3>

comes out as

module.exports = "<h3><%= any_variable %></h3>"

I feel like I must be missing some silly detail, otherwise maybe the thing to do is alter html-loader? It's a fairly trivial detail but I still feel like I'm misunderstanding this tool.

check it out https://github.com/webpack/html-loader/blob/master/index.js

as requested, from webpack.config.js, or in my case Gruntfile.js

module: { loaders: [ { test: /\.html$/, loader: "html" } ] }

SOLUTION: turns out I can't actually read, require("html!./some_template.html"); runs the loader, and then I was also running it in my config, so I wound up with commonjs declaration in my html.

Answer 1

It is explicitly coded to do that - https://github.com/webpack/html-loader/blob/master/index.js#L71

You could contact the author through github and/or file an issue there?

Answer 2

For others who are struggling like me here's the solution - https://www.reddit.com/r/javascript/comments/39jp8z/webpack_weirdness_no_love_at_stackoverflow/

Basically the html-loader is running twice!!

Remove either of the setting. (in webpack config or while importing)