使用webpack在多页应用程序设置上动态加载HTML

时间:2018-12-19 16:38:58

标签: javascript webpack webpack-4 multi-page-application

我正在使用webpack 4项目为多页应用程序网站进行设置,我已将其配置为可与多个js条目一起使用,而不会出现任何问题,动态加载src下的任何文件,以及所有页面( views下的.htmls)与html-webpack-plugin捆绑在一起。

当通过webpack-dev-server提供初始捆绑包时,这很好。

我当前遇到的问题是,每次我创建新资源(html页面)时,webpack都会正确导航到该资源,但是它没有HMR,也不会实时重新加载。

>

我想使使用模板的过程尽可能无缝。正常的方法是通过html-webpack-plugin添加新页面资源并创建一个js条目,但是我想将该逻辑抽象给使用当前设置的任何人。那就是为什么我要动态加载所有内容。

到目前为止,我已经尝试过...

  • 有思想的watch,watchContentBase和watchOptions会对我有所帮助,但这更多的是用于实时重新加载当前html的配置,除非我配置错误。
  • 在webpack配置中进入编译器和编译钩子循环(afterCompile,afterEmit等),然后尝试添加资源,但无济于事,也许我走在正确的轨道上,但是还没有到达我正在寻找的解决方案。
  • 搜索可用的类似插件,但没有找到任何可以让我添加带有js条目的新html页面并对其进行HMR和实时重新加载的功能。
  • 观看文件夹(使用chokidar)并触发完全重建。 (感觉有点黑)

真的需要完全重建吗,我不能挂接到编译器并动态添加新的依赖项吗?

The template in question
Webpack dev config

0 个答案:

没有答案