javascriptwebpackwebpack-dev-serverssishtml

Webpack + SSI rendering without full HTML compilation


I'm rebuilding a static legacy website with webpack + misc. plugins (mini-css-extract-plugin, html-webpack-plugin, copy-webpack-plugin, etc).

This existing site includes SSI (html includes in tandem with shtml files for "component"-izing of html code on the Apache environment in which we deploy, ssi html includes like header, footer, etc, in addition to the shtml page files which use the includes (home, about, etc), so SSR is off the table. I don't control the server/CMS configurations unfortunately).

I need to retain the folder structure of the SSI setup in the src folder, render it correctly on the dev server (using webpack-dev-server with hashed file injection, live reload, etc), but not have the buildout render fully compiled html (like i said before, retain the SSI structure used in the src folder). I have implemented the ssi-loader for webpack to at least render the include content correctly in the dev environment, but that, again, just compiles the include files to html when I build the content to a production environment.

Is there any way to do this currently with webpack only? I used gulp-connect, and connect-ssi for middleware on a local gulp-connect server for previous build processes on other projects, but am trying to migrate things away from that and have gotten stuck on the need to identically copy the SSI structure from src to build, but also render the SSI content correctly on a local webpack server (again, ssi-loader works for webpack dev environment rendering, but I can't build out full html to production folder, I need to keep the SSI structure of the content).

Any tips?


Solution

  • Solved issue with ssi-webpack-plugin for rendering SSI includes on devServer & copy-webpack-plugin for SSI include buildout on production serve. I am able to watch for changes by requiring the individual includes in my entry point on my devServer as well.