Skip to content

Instantly share code, notes, and snippets.

@mildmojo

mildmojo/html-annotate-filenames.js

Last active September 27, 2017 17:41
Show Gist options
  • Save mildmojo/62f86a73a61f8f4d6b04e8a2ee9dd7ba to your computer and use it in GitHub Desktop.
Save mildmojo/62f86a73a61f8f4d6b04e8a2ee9dd7ba to your computer and use it in GitHub Desktop.
Download ZIP
Webpack loader that inserts original source filenames as HTML comments
Raw
html-annotate-filenames.js
/*
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
Copy link
Author

mildmojo commented Sep 27, 2017 •
edited

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