reach-et-remover-html-plugin

A html-webpack-plugin tool that removes erroneous css link tags in Cue's standard HTML. This is because the CSS has been moved into the webpack build in order to minify and optimise the CSS.

Usage

The remover has 2 parts the first is a array of css links you want removing and the other is to add optimise the google fonts calls

const webpackSetup = require('reach-et-webpack-setup'); // or your own webpack setup
const HtmlWebpackPlugin = require('html-webpack-plugin');
const reachEtRemoverHtmlPlugin = require('reach-et-remover-html-plugin');
const { merge } = require('webpack-merge');

module.exports = (env, argv) => {
  const { webpackConfig, config } = webpackSetup(env, argv);

  const {
    htmlOutput,
    htmlTemplate,
  
  } = config;

   return merge(webpackConfig, {
     plugins: [
       new HtmlWebpackPlugin({
        filename: htmlOutput,
        alwaysWriteToDisk: true,
        template: htmlTemplate,
        excludeChunks: Object.keys(files),
      }),
      new RemoverHTMLPlugin({
        css: ['core.css', 'datepicker.min.css'],
        googleFonts: true,
      }),
     ]
   }
}

So the above code with remove the following from the index.html file:

<link href="css/datepicker.min.css?cache-bust-id=12071" rel="stylesheet">
<link href="css/core.css?cache-bust-id=6062" rel="stylesheet">

The files can then be moved within the webpack build.

Please note due to errors in the core.css it is recommended to copy the core.css downs and fix any css errors before compiling.

If googleFonts: true it will look for any google font links in the html and add optimisations as recommended here - https://optimizefonts.com/

So the following:

<link href="https://fonts.googleapis.com/css?family=Hind:400,300,600,700&amp;subset=latin,latin-ext" rel="stylesheet">

into the following:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Hind:400,300,600,700&amp;subset=latin,latin-ext&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Hind:400,300,600,700&amp;subset=latin,latin-ext&display=swap" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Hind:400,300,600,700&amp;subset=latin,latin-ext&display=swap">
</noscript>