webpack-contrib / html-loader Goto Github PK

Wanting to use it with a template that has this in the head tag:

<link rel="apple-touch-icon" href="icon.png"/>

But it doesn't seem to pick it up! The syntax seems simple enough to add.. want a pull request?

When an HTML page is referencing URLs containing hash fragments, html-loader will extract the entire URL and attempt to require it. This obviously fails, as no such URL (including the hash fragment) exists. A real world use case would be when a HTML page is using inline-svg with an external source, like this:

<svg viewBox="0 0 100 100">
    <use xlink:href="icons.svg#icon-arrow"></use>
</svg>

In this case, html-loader will turn the href-attribute into something similar to this require("./icons.svg#icon-arrow"), which causes webpack to crash, as the correct result should have been something like this require("./icons.svg") + "#icon-arrow"

During the build process, if you have an error in your html code (for instance <div role-"nav">lorem</div>, the - when it should be =), instead of reporting the error and stopping the larger webpack build process, the process just hangs.

If it's at all possible, the minifier should error out and report the error to webpack for display to the user.

I would like to make a pull request to improve the README to mention extract-loader to deal with file-loader, because it seems a scenario some people requested (dealing with angular), is not documented on the web and can save quite some time. Is it fine or there are some specific guidelines to avoid that?

I write my Angular applications as ES6 for WebPack, where one might do:

import SomeTemplate from "./template.html";
import "./some.css";

This works fine when combining Webpack and Babel, because Webpack affects the stream before Babel translates. But I also want to unit test my code, using Mocha and Babel. When I import the above, I get the two errors below.

It's to be expected, although I'm not sure why Babel by default interprets .html as React. Just wondering, what's the right way to shim this in tests? Do I need to write a plugin for my tests that intercepts imports of HTML and CSS and does nothing?

The HTML loading gives::

/Users/paul/projects/karl/admin5/src/admin/box/box.showlog.html:3
React.createElement(
^

ReferenceError: React is not defined
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/src/admin/box/box.showlog.html:1:1)
    at Module._compile (module.js:430:26)
    at normalLoader (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/src/admin/box/box.list.controller.js:1:14)
    at Module._compile (module.js:430:26)
    at normalLoader (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/src/admin/box/tests/box.list.controller.specs.js:5:27)
    at Module._compile (module.js:430:26)
    at normalLoader (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at /Users/paul/projects/karl/admin5/node_modules/mocha/lib/mocha.js:192:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/paul/projects/karl/admin5/node_modules/mocha/lib/mocha.js:189:14)
    at Mocha.run (/Users/paul/projects/karl/admin5/node_modules/mocha/lib/mocha.js:422:31)
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/node_modules/mocha/bin/_mocha:398:16)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:471:10)
    at startup (node.js:117:18)
    at node.js:952:3

...and the CSS gives::

SyntaxError: /Users/paul/projects/karl/admin5/src/admin/admin.css: Unexpected token (2:11)
  1 | 
> 2 | md-sidenav a {
    |            ^
  3 |     text-decoration: none;
  4 | }
  5 | 
    at Parser.pp.raise (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.semicolon (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:69:81)
    at Parser.pp.parseExpressionStatement (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:427:8)
    at Parser.parseExpressionStatement (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:642:20)
    at Parser.pp.parseStatement (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:142:21)
    at Parser.parseStatement (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
    at Parser.pp.parseTopLevel (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
    at Parser.parse (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
    at Object.parse (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
    at Object.exports.default (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/helpers/parse.js:36:18)
    at File.parse (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/transformation/file/index.js:573:40)
    at File.parseCode (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/transformation/file/index.js:690:20)
    at /Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/transformation/pipeline.js:167:12
    at File.wrap (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/transformation/file/index.js:638:16)
    at Pipeline.transform (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/transformation/pipeline.js:165:17)
    at Object.transformFileSync (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/node.js:137:37)
    at compile (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:132:20)
    at normalLoader (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:14)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/src/admin/box/box.list.controller.js:1:14)
    at Module._compile (module.js:430:26)
    at normalLoader (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/src/admin/box/tests/box.list.controller.specs.js:5:27)
    at Module._compile (module.js:430:26)
    at normalLoader (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/paul/projects/karl/admin5/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at /Users/paul/projects/karl/admin5/node_modules/mocha/lib/mocha.js:192:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/paul/projects/karl/admin5/node_modules/mocha/lib/mocha.js:189:14)
    at Mocha.run (/Users/paul/projects/karl/admin5/node_modules/mocha/lib/mocha.js:422:31)
    at Object.<anonymous> (/Users/paul/projects/karl/admin5/node_modules/mocha/bin/_mocha:398:16)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:471:10)
    at startup (node.js:117:18)
    at node.js:952:3

    htmlLoader: {
      minimize: false,
    },

doesnt seem to work

Hi. I have original code "<..... open="true" ....>", when I build my project and html loader minimizes HTML - I get "<......... open ........>". But I do not want such behavior. Could you please recommend how to set params to loader and which params certainly?

Because i am using the html-loader as my template loader, sometimes i need to set a variable img src like

<img src="[[key]].png"/>

But it will cause en error telling that the img cannot be found, i think the url-loader is trying to find it.

Any solution about this?

Updating an HTML file does not call HMR for an update.

Minifier Option case sensitive should be disabled by default, otherwise some templates written for angular2 may be broken.

Bring html-loader project code quality tooling inline with webpack core

• ESLint & Config
• jsbeutify
• editor config

This means potential layout issues between development and production since whitespace is significant in html. Rather than eliminating them entirely, spaces should be collapsed to a single sequential space to better reflect how html is handled by browsers.

I'm using the interpolate option, var mytemplate = require('html?interpolate!./mytemplate.html'), to include 'partials' in my html file

mytemplate.html

<div>
${require(./partials/mypartial.html)}
</div>

partials/mypartial.html

In a partial

The partial get appropriately loaded but the resulting html string (mytemplate) has the html wrapped in module.exports("HTML_FILE_HERE");

The final result would place the string 'module.exports("<div>In a partial</div>")' in the variable mytemplate. I want it to be simply the html, which is the way it isually is if I don't have the option interpolate option turned on for the require.

What am I doing wrong, or is this a bug?

Bring html-loaders travis execution inline with webpack core

• Add linting
• Add coverage generation / reporting via codecov.io
• Status badges in readme ( Readme template coming from @michael-ciniawsky )

By default, this plugin will blow away 'redundant' attributes. This means that it will remove type='text' from an input. This is bad because it breaks styles, and potentially javascript etc.

The html minifier you use has settings that it calls "safe", you should default to those at most.

This is a feature request.

I'd like to be able to compile a template which can require in CSS Modules and apply the dynamic class names to elements. Essentially something like this:

<link href="./headers.css" rel="stylesheet:headers" />
<link href="./layout.css" rel="stylesheet:layout" />

<div class="layout.card layout.flex">
    <h1 class="headers.main">My styled header<h1>
</div>

Basically the :headers and :layout parts name local vars which store your dynamic class name maps. They are then accessed by referencing var.class where var is the name of the local var you gave it in the link tag and class is a class name from that file as it appeared in the source.

Obviously the syntax is flexible, but I like that this approximates current tags and their usages. What's more CSS class names cannot have . characters and link tag rel attributes do not contain : characters, so this syntax should be safe from unintended consequences. It could also add entirely new tags and attributes to handle this.

Why do this?

I know that ES6 templates tags and common frameworks like React and Angular provide ways to do all this in JavaScript, eliminating the need for this. I am wanting to add this to provide a migration path for a legacy codebase to use CSS Modules (which I ❤️ BTW). In my particular case, I'm having a JSP tag read in the HTML (via extract-text-webpack-plugin) and use it in its server side generation with a long term goal of migrating server side rendering to React/Angular 2.

I love these new technologies and I wouldn't even need something like this in a green field project. But when working out a migration strategy for existing code, options like these are invaluable.

css-loader, style-loader and company would figure out how to load the actual CSS to the page, this just handles dynamic class name insertion.

I would love to work on the PR for this, if this is something the maintainers would want. If not I can look at writing a separate loader to do the same thing.

Thoughts? Love it? Hate it? I'd love to have a discussion. 😄

Is the code licensed with MIT ?

Can you please add a file in the repository (and update the package.json)

A feature for discussion:

I propose the loader should have an option not to require a full HTML document, within <html> tags.

I'd like to use the html loader to load an HTML snippet (representing a template) as text into a variable.

The snippet would look like this:

<!-- List item template. -->
<li>
  <a href="#">
    <h3>#{number} {customer}</h3>
    <p>{title}</p>
    <span class="ui-li-count">{status}</span> <!-- shows status -->
    <p class="ui-li-aside"><strong>{time}</strong></p>
  </a>
</li>

And I would include it like this:

var listTemplate = require('html!templates/listItem.html');

Currently I'm doing that using the raw loader, but I'd like to be able to keep including templates but to have other HTML-specific options (specially minification).

Opened for discussion by @sokra.

This isn't an issue, but really a feature request. I would love to use this loader in conjunction with the internationalization plugin. The internationalization plugin is sweet, but it only works in Javascript and if any of you are like my company, almost all our textual content is written in the html, making the plugin essentially useless. However, if the html parser could be intelligent enough to look for i8n attributes (in the same way it looks for img src attributes), then this problem could be effectively solved.

Imagine a use scenario like so:

//An html file: someText.html
<div>
    <h1>Company Name</h1>
    <div i8n> Some text <b> with bold </b></div>
 </div>

//Then gets converted to this webpack module...
module.exports = "<div> <h1> Company Name </h1> <div i8n>" + __("Some text <b> with bold </b>") + "</div></div>"

I think this could work, although it would be very dependent on the implementation of the i8n plugin. There also might be some snags in ensuring the loader escapes special characters in the html and disallows nested i8n attributes. But in all, it might not be too bad assuming the i8n plugin plays nicely.

Would people be opposed to adding this feature?

I'm setting the html-loader query to minimize=false in my webpack config, but when bundled for production and uglyfied, html is still getting compressed (eg. whitespace removed, input type=text remove, etc). Any ideas how to work around this? I'd love to use uglify as part of webpack and not a seperate build step.

When minifying, if a template contains angular2 syntax like <a (click)="..." [something]="..."> the build fails with a Parse Error.

See:
kangax/html-minifier#422
webpack/webpack#992

When using the following syntax in the template and running webpack -p or webpack --optimize-minimize the build progress stalls at "build modules" and never completes, no error, no timeout, no nothing .. just hangs there.

<a @click="doSomething"></a>

While this works without a problem:

<a v-on:click="doSomething"></a>

The syntax is used as a vue.js shorthand for attaching event listeners to elements.
vuejs/vue-loader#102

When running webpack in prod mode -p an error occurs when using directives such as *ng-if because of the * that somehow breaks html-loader.

ERROR in ./lib/components/http/index.html
Module build failed:
 @ ./lib/components/http/index.ts 34:22-45

If you want to test you can clone https://github.com/shprink/angular2-nobullshit-boilerplate/ and change the raw loader by the html loader in this line: https://github.com/shprink/angular2-nobullshit-boilerplate/blob/master/webpack.config.js#L28

A feature for discussion:

The loader by default should not alter the included file. This would be useful during development, to see the included content with comments, indentation, etc.

But there should be a way to minimize it when packaging for distribution.

I was wondering about a way to create a more "diffable" output... for easier line-by-line auditing of the generated JavaScript.

Perhaps there could be an option to have multi-line output like this?

module.exports = [
    "<div>\n",
    "    <p>Just a thought...</p>\n",
    "</div>\n",
].join('');

Obviously our templates a little bigger than this or else I would not be asking...

I'm using webpack 2.0 beta, if I want to " import xx from 'x.css' ", then pass xx string to the template config(like template: xx), running will go wrong cause the build will be: " template: xx.default ", however htmlloader build will be : "module.exports=xx", not "module['default']=xx".

This doesn't get picked up as a require:

<img src='./foo.png'> but <img src="./foo.png"> does.

Is this intentional?

I handle lazy loading images on the client and this took a while to find

template

<img src="images/test.png" />

js

require('./template.html')

But webpack cannot find module.

Uncaught Error: Cannot find module "./images/default_food.png"

Turns out html-loader translate the template to

"<img src=\"" + require("./images/default_food.png") + "\" />"

But what I want is require("images/default_food.png"). no ./ prepended.

Bring html-loader project documentation inline with webpack core

• Modify and add ISSUE_TEMPLATE.md from webpack/webpack
• Modify and add PULL_REQUEST_TEMPLATE.md from webpack/webpack
• Add LICENSE
• Add CONTRIBUTING.md

In angular directive, I load template by require('./template.html')
for example:
return {
restrict: 'AE',
priority: 1,
scope: { gridModel: '=eeTree'},
template: require('./template.html'),
link: function ($scope, element, attrs) {}
}
if template.html file contain {{ a<b }}, there will error happen, html-loader or webpack think '<' mean html tag start symbol.
this error only happen by use parameter -p to pack

How can I use html-loader together with file-loader, so I can preprocess image urls by wepback and then generate output to html file?

loader:
{ test: /\.jade$/, loader: 'html?attrs[]=img:src!jade-html?doctype=html' }

jade:
video(autoplay,loop,id="bgvid")
source(src="/assets/frames.mp4",type="video/mp4")

I've been using this loader for riot templates and noticed that on upgrade from 0.4.0 to 0.4.2 all my onclick bindings stopped working. In riot I define them like this:

onclick="{ onClick }"

Any idea why it doesn't work anymore? I'd need those to stay unchanged in the loaded string.

Minification should remove HTML comments. Changing loaderTest.js test "should minimize" to look like this:

'<!-- comment --><h3>#{number} {customer}</h3>\n<p>   {title}   </p>\n\t <!-- comment --> <img src="image.png" />'

Should still produce the same result.

I've made this modification on the test:

diff --git a/test/loaderTest.js b/test/loaderTest.js
index f2fd67f..66978f5 100644
--- a/test/loaderTest.js
+++ b/test/loaderTest.js
@@ -37,8 +37,8 @@ describe("loader", function() {
        it("should minimize", function() {
                loader.call({
                        minimize: true
-               }, '<h3>#{number} {customer}</h3>\n<p>   {title}   </p>\n\t<img src="image.png" />').should.be.eql(
+               }, '<!-- comment --><h3>#{number} {customer}</h3>\n<p>   {title}   </p>\n\t <!-- comment --> <img src="image.png" />').should.be.eql(
                        'module.exports = "<h3>#{number} {customer}</h3><p>{title}</p><img src=" + require("./image.png") + ">";'
                );
        });
-});
\ No newline at end of file
+});

After running mocha I get this error:

  1) loader should minimize:

      AssertionError: expected 'module.exports = "<!-- comment --><h3>#{number} {customer}</h3><p>{title}</p><!-- comment --><img src=" + require("./image.png") + ">";' to equal 'module.exports = "<h3>#{number} {customer}</h3><p>{title}</p><img src=" + require("./image.png") + ">";'
      + expected - actual

      +"module.exports = \"<h3>#{number} {customer}</h3><p>{title}</p><img src=\" + require(\"./image.png\") + \">\";"
      -"module.exports = \"<!-- comment --><h3>#{number} {customer}</h3><p>{title}</p><!-- comment --><img src=\" + require(\"./image.png\") + \">\";"

      at Assertion.prop.(anonymous function) (/home/fernando/work/github/webpack/html-loader/node_modules/should/lib/should.js:60:14)
      at Context.<anonymous> (/home/fernando/work/github/webpack/html-loader/test/loaderTest.js:40:132)
      at Test.Runnable.run (/usr/lib/node_modules/mocha/lib/runnable.js:221:32)
      at Runner.runTest (/usr/lib/node_modules/mocha/lib/runner.js:374:10)
      at /usr/lib/node_modules/mocha/lib/runner.js:452:12
      at next (/usr/lib/node_modules/mocha/lib/runner.js:299:14)
      at /usr/lib/node_modules/mocha/lib/runner.js:309:7
      at next (/usr/lib/node_modules/mocha/lib/runner.js:247:23)
      at Object._onImmediate (/usr/lib/node_modules/mocha/lib/runner.js:276:5)
      at processImmediate [as _immediateCallback] (timers.js:330:15)

I couldn't find a configuration option to activate HTML comment removal.

As requested by @jhnns, the loader should have an option to emit into the bundle folder the assets referenced by the HTML content, such as images and other files.

Setup:

• html-loader
• UglifyJsPlugin
• invalid html (forgot a closing ">")

<h1>Hello World<h1

Result:
webpack just hangs, no error, nothing:
65% 231/248 build modules

Expected:
a warning or error message

Whats I doing wrong?

JS Controller

import '../../assets/messaginghub.png';

HTML

<img src="messaginghub.png" style="margin-bottom: -12px; height: 60px" />

Webpack configuration

{test: /\.png$/i, loader: 'url?mimetype=image/png&name=imgs/[name].[ext]?[hash]', exclude: /node_modules/},
{test: /\.html$/, loader: 'html', exclude: /node_modules/}

Error

ERROR in ./~/html-loader!./www/components/anon/loginView.html
Module not found: Error: Cannot resolve 'file' or 'directory' ./\"" in ...\www\components\anon
 @ ./~/html-loader!./www/components/anon/loginView.html 1:1186-1205

As requested by @d3viant0ne in #55, creating an issue feature request for this.
I don't need it at the moment, but it will greatly enhance the usability of #55 and open it up to more practical use-cases.

Are there any plans or ideas how to support html-imports?

I guess this would also require to tackle the problem how to include referenced scripts and stylesheets into the bundle.

Vue 1.0 ( https://github.com/yyx990803/vue/wiki/1.0.0-binding-syntax-reference ) uses the following binding syntax, but html-loader will wrongly parse it.

<img v-bind:src="foo">
<img :src="foo">

would be nice if the loader converted <script src... and <script>...</script> to requires.

Not sure how to achieve the multiple javascript output from a single module, though.

According to http://perfectionkills.com/experimenting-with-html-minifier/#remove_optional_tags this feature might change the behaviour of the result.
This also caused jantimon/html-webpack-plugin#128

Why do you remove HTML, BODY and HEAD?

hello!

text.html

<a href="#" class=" {{js "this.type === \'page\' ? \'back\' : \'\'"}}"></a>

when i run build! this html cant load! but i can require this in webpack-dev-server!

my format does not comply with it?

Forgive my bad English.. = =!!

The current settings will break Angular 2 templates as well as templates for many other MVC frameworks. Rather than try to require uses to pass custom ignore regex's it would be better to have a framework query:

html?framework=Angular2 or html?framework=Ember, etc that ensured the minification settings were safe by default for those frameworks. I'm happy to put together pull requests for Angular and Angular2.

http://perfectionkills.com/html-minifier-revisited/

Continued from #34 (comment) - I should have made a new issue in the first place, my bad.

Anyway, my question is where is the minimize option documented? Are there options I can pass to it? Is it on or off by default? I have looked up and down the docs, but I only saw the comment about --optimize-minimize which I'm not sure does anything 😕

After looking through the source a bit, I've enabled it explicitly with:

htmlLoader: {
  minimize: true
}

but I'm not really sure if there is a difference being made on the HTML I'm loading in (via other loaders in the pipeline).

I'm working on adding some features to handlebars-loader, and one of the things I want to add is the ability to insert requires for static assets w/in the templates, or static assets referenced in helper parameters.

The fastparse library looks like it would do what I need, but I'd rather not straight-up copy it from this repo. It seems like it's generic enough to include in loader utils - what do you think? Or, it could be its own repo. I think parseAttributes is fine to stay in here, though I could also see that moving to loader utils as well. What do you think?

In the first example, for file.html:
<img src="image.png" data-src="image2x.png" >
When it should be
<img src="image.jpg" data-src="image2x.png" >
As a beginner to understanding loaders, this slight typo really threw me off. :)

I'm having an issue with webpack failing to resolve a 'root-relative' url for a img src in an html file. When code looks something like (/project/app/index.html):

<img src="/app/assets/img.jpg" />

webpack says:

ModuleNotFoundError: Module not found: Error: Cannot resolve file or directory .//app/assets/img.jpg in /project/app