Question

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

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

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

文件

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

page.html中

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

page.js

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

Webpack配置

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

这几乎起作用了，因为确实生成了JS包和HTML资产，我可以在IFRAME主页上require后者，但链接包./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 bundle在这里被插件正确链接。另一方面，似乎无法通过require或任何其他可靠的方式在我的主页上引用生成的HTML。

非常感谢任何建议

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

0 个答案: