Utilice el package web para generar un elemento HTML que use el package JS

El problema : uso Webpack y necesito mostrar parte de mi página en un IFRAME. El marcado para el contenido del IFRAME es estático e incluye algunas bibliotecas JS y algunas lógicas personalizadas de JS.

La idea : quería agrupar todas las dependencies de JS de la página representada en el IFRAME junto con mis otros packages de Webpack y build la página como un activo de HTML estático que luego puedo hacer reference desde la página de mi server como el src de IFRAME.

Método 1 : Intenté usar el file!val!html?attrs=script:src de Webpack file!val!html?attrs=script:src transform para mi file HTML estático.

Archivos

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

page.html

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

page.js

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

Configuración de package web

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

Esto casi funcionó, ya que el package JS y el activo HTML se generaron y podría require este último en la página IFRAME, pero el package vinculado ./page.js no se resolvió adecuadamente como una URL (se representa como [Object] ). Intentó el file!val!html?interpolate con <script src="${require('file!./page.js')}"> , que no puede ubicar el file por completo.

Método 2 : HtmlWebpackPlugin usar HtmlWebpackPlugin con la siguiente configuration:

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

Esto también, casi funcionó, tanto el package JS como el page.html habiendo sido creados. Contrariamente al primer método, el package JS se vinculó adecuadamente aquí con el complemento. Por otro lado, parece que no hay forma de referencer el HTML generado en mi página de host a través de require o cualquier otro medio confiable.

Cualquier sugerencia sería muy apreciada