使用 webpack 生成使用 JS 包的 HTML 资源

Question

问题：我使用 Webpack，我需要在 IFRAME 中显示页面的一部分。IFRAME 内容的标记是静态的，它包括一些 JS 库和一些自定义 JS 逻辑。

我的想法是：我想将 IFRAME 中呈现的页面的所有 JS 依赖项与其他 Webpack 捆绑包捆绑在一起，并将页面本身构建为静态 HTML 资源，然后我可以从主机页面将其引用为 IFRAME 的src.

方法 1：我尝试file!val!html?attrs=script:src对我的静态 HTML 文件使用 Webpack 的转换。

文件

page/
  lib/
    - jquery.js
    - ...
  - page.html
  - page.js

页面.html

...
<script src="./page.js"></script>
...

页面.js

const $ = require('./lib/jquery.js');
window.foo = () => { ... };

Webpack 配置

{
  ...,
  entry: {
    main: [...],
    page: ['page/page.js']
  }
}

这几乎成功了，因为 JS 包和 HTML 资源确实已生成，并且我可以require在 IFRAME 主机页面上生成后者，但链接的包./page.js无法正确解析为 URL（呈现为[Object]）。尝试file!val!html?interpolate使用<script src="${require('file!./page.js')}">，但无法完全找到该文件。

方法2：尝试使用HtmlWebpackPlugin以下配置：

new HtmlWebpackPlugin({
  filename: 'page.html',
  template: 'page/page.html',
  chunks: ['page'],
  inject: 'head'
})

这也几乎成功了，JS 包和page.html已创建的内容都已完成。与第一种方法相反，JS 包是通过插件正确链接到这里的。另一方面，似乎没有办法通过require或任何其他可靠的方式引用我的主机页面上生成的 HTML。

任何建议将不胜感激