Webpack + HTMLWebpackPlugin 用于多个 HTML 文件

Question

如果我的整个方法是错误的或者可以改进，请提出建议。我并不真正关心达到目的的手段，只关心我可以按照我想要的方式工作。

我正在构建一个具有多个页面的静态 Web 应用程序。在开发过程中，我正在快速添加新页面，这让我很伤心。我正在有效地这样做：https://dev.to/mariorodeghiero/multiple-html-files-with-htmlwebpackplugin-19bf 这似乎被多人推荐为将 HtmlWebpackPlugin 用于多个文件的方式。

我没有静态列表，我使用 fs 来全局化所有 *.html 并为我构建我的插件数组。

这很好用，但是每次我添加一个新文件时，我都必须重新启动我的开发工具链，以便使用新的文件/插件实例重新配置 webpack。这很不方便。

我知道当我检测到新文件时，我可以使用fs.watch 为我重新启动 webpack/重新运行配置，但这更糟糕。这肯定不是这样做的方法吗？

我如何拥有一个带有 webpack 的开发环境，我可以在其中添加 .html 文件并让 webpack 自动检测新文件并正常处理。

Answer 1

我想我在开发自己的框架时也有类似的情况。这是我所做的：

1. 用express和webpack-dev-middleware设置开发服务器
2. apply HtmlWebpackPlugin 仅当请求进来时，这应该在 webpack 的 assets 中添加一个新的 html 页面（不要使用 html-webpack-plugin@next，因为它不支持lazy apply https://github.com/jantimon/html-webpack-plugin/issues/1527#issuecomment-747447801）
3. invalidate webpack 编译 webpack-dev-middleware https://github.com/webpack/webpack-dev-middleware#invalidate，它会延迟响应直到 webpack 完成编译，这意味着请求的 html 页面将在准备好时提供

由于我现在是按需编译html页面，所以不需要重启开发服务器，确保webpack更快，因为它不必一次编译所有页面。