html-plugin integration

hey @faceyspacey I am using 2.0.11 All happening at https://github.com/cescoferraro/react-boil and deployed https://boil.cescoferraro.xyz/

GOAL

Insert all css in a html file using the html-webpack-plugin

REASON

In a pwa context, you need to provide a static html file so a service worker can cache it then next time a user hit the website’s url, it serves the static html instead of going through the network. There is no problem of adding ALL the css because all the files are supposed to be cached by the sw by the time the user visits the website again. The below snippet creates a html page that loads the js chunks in the right order!

new HtmlWebpackPlugin({
filename: "html/index.html",
template:  "./server/index.html",
showErrors: true,
chunks:['bootstrap','vendor', 'main'],
chunksSortMode: (a, b) => { 
    var order = ['bootstrap','vendor', 'main']; 
    return order.indexOf(a.names[0]) - order.indexOf(b.names[0]); 
}
})

But It I hit boil.cescoferraro.xyz/ with the app properly cached by chrome and than use the redux-first router link to jump to '/user/345345I wont see the syles being applied. Css tags wont be inject by the .js files. while Universal component tags that get asynchronously added get inject just fine. Also if I hit the url straight fromuser/234324`, ssr kicks in a deliver the right set of css files.

TRIED

code

<% for (var chunk in htmlWebpackPlugin.files.js) { %>
 <%= htmlWebpackPlugin.files.js[chunk] %>
 lsdkmfsdmdfkldsf
<% } %>

<% for (var chunk in htmlWebpackPlugin.files.css) { %>
 <%= htmlWebpackPlugin.files.css[chunk] %>
 lsdkmfsdmdfkldsf
<% } %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<%= htmlWebpackPlugin.files.chunks[chunk].entry %>
<% } %>

output

 https://boil.cescoferraro.xyz/js/bootstrap_2a26b113ed4fbfd76873.js
 lsdkmfsdmdfkldsf

 https://boil.cescoferraro.xyz/js/vendor.js
 lsdkmfsdmdfkldsf

 https://boil.cescoferraro.xyz/js/main_2a26b113ed4fbfd76873.js
 lsdkmfsdmdfkldsf





https://boil.cescoferraro.xyz/js/bootstrap_2a26b113ed4fbfd76873.js

https://boil.cescoferraro.xyz/js/vendor.js

https://boil.cescoferraro.xyz/js/main_2a26b113ed4fbfd76873.js

It seems that the html-plugin does not consider the output of this plugin as being a css file

[mike1808]

@faceyspacey so, I figured out how to include css chunks into HTML file.

I wrote small plugin for html plugin based on cssChunckHash function from webpack-flush-chunks:

/* eslint-disable */

function CssChunkHash(options) {
}

CssChunkHash.prototype.createCssHash = function ({ assetsByChunkName, publicPath }) {
    return Object.keys(assetsByChunkName).reduce((hash, name) => {
        if (!assetsByChunkName[name] || !assetsByChunkName[name].find) return hash;
        const file = assetsByChunkName[name].find(file => file.endsWith('.css'));
        if (file) hash[name] = `${publicPath}${file}`;
        return hash;
    }, {});
};


CssChunkHash.prototype.apply = function (compiler) {
    const self = this;
    compiler.plugin('compilation', function (compilation) {
        compilation.plugin('html-webpack-plugin-before-html-generation', function (htmlPluginData, callback) {
            const webpack = compilation.getStats().toJson();
            const cssHash = self.createCssHash(webpack);
            htmlPluginData.assets.cssHash = cssHash;
            callback(null, htmlPluginData);
        });
    });
};

module.exports = CssChunkHash;

Then, just include it in webpack config and use the following code in your html template (ejs in my case):

<script type="text/javascript">
    window.__CSS_CHUNKS__ = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin.files.cssHash) %>')
</script>

[faceyspacey]

This isn’t my forte, as I don’t use HtmlWebpackPlugin, but basically these tools are intended for pretty manual setups that wouldn’t use that. So the recommended way is to take full control of the html wrapper code and generate it yourself. I’m sorry to say.

However, @cescoferraro 's solution perhaps could be formalized more and become the recommended solution??