I had a task that included the following workflow:

1. Update the html
2. Copy the contents of the html in another file
3. Replace the double quotes " with escaped double quotes \"
4. Copy the replaced html and paste it in a tool that makes text to one line
5. Copy this new one line html into our internal script

And I have to be hones, I did this for about a month, because I was lazy to setup a webpack project and had some deadlines.

BUT NO MORE!!!

Today I made a small webpack.config file to handle the steps from 2 to 4.

If you use webpack, you might already know that in order to handle your html, you need the html-webpack-plugin.

Webpack, by default, goes to production mode, which means that it will automatically minify your html.

But here is the GOTCHA: it doesn't minify your head styles; which means, you will have minified html content, but you will have the header styles as you wrote them, with spacing and everything, in the head of your new minified document.

The easy way so by-pass this, is to use in your new HtmlWebpackPlugin() minify options object the following option minifyCSS: true,.

If you are in development mode, add the option collapseWhitespace: true,

I had some specific needs...

Out script had to have closing images tags </img> and closing break row tags </br> and these were automatically removed by the HtmlWebpackPlugin.

How I kept these in my new html was to add this option ignoreCustomFragments: [/<[/br>]*>/, /<[/img>]*>/]. This option needs an array with regex elements of the custom tags you want to be ignored by the plugin. As a side note, I'm glad it was only these two, because I hate regex

And I also added the option keepClosingSlash: true, just to be on the safe side so we the plugin won't remove my closing slashes from my elements.

Escaping the html double quotes

For this, I used the html-replace-webpack-plugin which should have been pretty straight forward (but in my case, it wasn't).

For this, you need to pass the pattern of your double quotes pattern: /"/g, and the replacement of your escaped double quotes replacement: '\\"', and that's it.

By the way, you see that double \ in the replacement prop? It took me an hour to figure out why it wouldn't replace my " with \", because I was trying to replace with '\"', but it was doing nothing. I needed to add the second \ in order to make it work.

Here is the webpack.config.js file if you need it:

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');

module.exports = {
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            minify: {
                collapseWhitespace: true,
                keepClosingSlash: true,
                minifyCSS: true,
                ignoreCustomFragments: [/<[/br>]*>/, /<[/img>]*>/]
            }
        }),
        new HtmlReplaceWebpackPlugin([{
            pattern: /"/g,
            replacement: '\\"'
        }
        ])
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
};

After you install the plugins, place your index.html, src/index.js files and setup your package.json scripts, you are good to go. You'll find the processed html in dist/index.html