没有完整 HTML 编译的 Webpack + SSI 渲染

Webpack + SSI rendering without full HTML compilation

我正在使用 webpack + misc 重建静态遗留网站。插件(mini-css-extract-plugin、html-webpack-plugin、copy-webpack-plugin 等)。

此现有站点包括 SSI(html 与 shtml 文件串联,用于 "component"-izing 我们部署的 Apache 环境中的 html 代码, ssi html 除了使用 include 的 shtml 页面文件(home、about 等)之外,还包括页眉、页脚等,因此 SSR 关闭了 table。不幸的是,我无法控制 server/CMS 配置。

我需要在 src 文件夹中保留 SSI 设置的文件夹结构,在开发服务器上正确呈现它(使用带有散列文件注入、实时重新加载等的 webpack-dev-server),但没有buildout 渲染完全编译 html(就像我之前说的,保留 src 文件夹中使用的 SSI 结构)。我已经为 webpack 实现了 ssi-loader 以至少在开发环境中正确呈现包含内容,但是当我将内容构建到生产环境时,它再次将包含文件编译为 html。

目前有什么方法可以只使用 webpack 来做到这一点吗?我在本地 gulp-connect 服务器上使用 gulp-connect 和 connect-ssi 作为中间件,用于其他项目的先前构建过程,但我试图从那里迁移东西并且卡在了需要相同地从 src 复制 SSI 结构来构建,而且还要在本地 webpack 服务器上正确渲染 SSI 内容(同样,ssi-loader 适用于 webpack 开发环境渲染,但我无法构建完整 html到生产文件夹,我需要保留内容的 SSI 结构)。

有什么建议吗?

解决了 ssi-webpack-plugin 在 devServer 上渲染 SSI 的问题,以及 copy-webpack-plugin 在生产服务器上渲染 SSI 的问题。我也可以通过要求将个人包含在我的 devServer 的入口点中来观察变化。

我为 SSI 制作了这个 webpack 加载器,您也可以使用: webpack-ssi-include-loader

它使用递归包含并扫描您的本地文件