Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack loader that inserts original source filenames as HTML comments
/*
html-annotate-filenames
Webpack loader that surrounds generated HTML blocks with comments noting the
original source filename for the block.
To use, modify your webpack config with a `resolveLoader` that can find this
file and a rule for this loader. Example:
{
entry: "...",
resolveLoader: {
modules: ["node_modules", path.resolve(__dirname, "loaders")]
},
module: {
rules: [
{
test: /\.html$/,
enforce: "pre",
use: {
loader: "html-annotate-filenames"
}
}
]
}
}
Tested with webpack 2.7.0.
*/
'use strict';
const loaderUtils = require('loader-utils');
module.exports = function(content) {
const filename = loaderUtils.interpolateName(this, '[name].[ext]', {content});
return `<!-- begin ${filename} -->\n${content}\n<!-- end ${filename} -->`;
};
@mildmojo

This comment has been minimized.

Copy link
Owner Author

@mildmojo mildmojo commented Sep 27, 2017

Before:

<body>
  <div>
    <div>Content!</div>
  </div>
  <div>
    <div>More content!</div>
  </div>
</body>

After:

<body>
<!-- begin content.html -->
  <div>
    <div>Content!</div>
  </div>
<!-- end content.html -->
<!-- begin moreContent.html -->
  <div>
    <div>More content!</div>
  </div>
<!-- end moreContent.html -->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.