How not to rewrite everything everytime :)

Recently I had a task - add cache busters in the existing React project.

It is pretty straightforward - open webpack config, add [contenthash(:number)] to output.filename, and that's it.

Give me a sec, I said, and open my IDE.

But that was not so easy because links to resulting js files were hardcoded to ejs templates. ExpressJS serve those templates because some variables should be inserted there on request time.

My first thought was to throw everything out and rewrite it with proper SSR. But that would take more time than I can afford on that task.

o what I need is to somehow add links to templates by Webpack. And HtmlWebpackPlugin, with the help of raw-loader, can do that.

First of all, make sure that HtmlWebpackPlugin and raw-loader are installed in the project.

npm install html-webpack-plugin raw-loader --save-dev

Then we will tell HtmlWebpackPlugin to get our existing templates, add there links to assets, live rest as it is, and save as new templates for the ExpressJS server.

module.exports = {
  entry: {
    admin: './src/admin.js',
    user: './src/user.js',
  },
  output: {
    filename: '[name].[contenthash:6].js',
    path: resolve(__dirname, 'public'),
  },
  optimization: { ...  },
  module: { ... },
  plugins: [
    new HtmlWebpackPlugin({
      // path where new template with injected links will be stored
      filename: '../views/dist/admin.ejs',
      // path to old template
      // notise !!raw-loader! before path thats where magic is happened
      template: '!!raw-loader!./views/admin.ejs',
      // public path where our assets will be avalable
      publicPath: "/",
      // in order to add chunks only for the required entry points
      chunks: ['admin'],
    }),
    new HtmlWebpackPlugin({
      filename: '../views/dist/user.ejs',
      template: '!!raw-loader!./views/user.ejs',
      publicPath: "/",
      chunks: ['user'],
    })
  ],
};

I hope it helps you next time you feel the urge to rewrite everything.