extract-loader
extract-loader copied to clipboard
peerigon
Add examples with html-webpack-plugin
Is there any progress on this? Currently this whole module appears pretty useless for a bundle that has css AND js files as it seems that one can either use hashed css-file names in the resulting html file or hashed js-file names but not both. I'm pretty sure that this is not the case but the lack of a thorough documentation leaves me clueless on how to do this properly.
It should also be more clear where the names come from. I.e. why is the css file with the name main.css replaced with the hashed css file's name and why does that name resolve?
It's been a minute but I wanted to see if anyone has any insight into this. Here's a concrete example (which inlines the extracted contents into the html file):
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.md',
},
mode: 'development',
module: {
rules: [{
test: /\.md$/i,
use: [{
loader: 'file-loader',
}, {
loader: 'extract-loader',
}, {
loader: 'html-loader',
}, {
loader: 'markdown-loader',
}],
},
],
},
plugins: [
new HtmlWebpackPlugin({
templateContent: ({ compilation }) => {
const mdAsset = Object.keys(compilation.assets).filter(asset => asset.includes('.md'));
const mdSource = mdAsset.map(asset => compilation.assets[asset].source());
return `
<html>
<head>
<title>juanca.github.io</title>
</head>
<body>
${mdSource}
</body>
</html>
`
},
}),
]
};
This doesn't scale since it does not get the extracted content from the index entry -- and I don't believe I have figured out how to do that.
