Add examples with html-webpack-plugin

ohcibi commented 7 years ago

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?

juanca commented 4 years ago

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.

ohcibi commented 4 years ago

Mö

_{Sent with GitHawk}

peerigon / extract-loader

Add examples with html-webpack-plugin #4