share_this_document plugin page new htmlwebpackplugin doc_page cannot body app javascript express webpack react-router

javascript - plugin - webpack doc_page src app page body body share_this_document



HtmlWebpackPlugin inyecta archivos de ruta relativa que se rompen al cargar rutas de sitios web no root (3)

De hecho, tuve que poner:

output.publicPath: ''./'';

para que funcione en una ruta no ROOT. Al mismo tiempo estaba inyectando:

baseUrl: ''./''

dentro

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

Con ambos parámetros establecidos, funcionó de maravilla.

Estoy usando webpack y HtmlWebpackPlugin para inyectar js y css en un archivo de plantilla html.

new HtmlWebpackPlugin({ template: ''client/index.tpl.html'', inject: ''body'', filename: ''index.html'' }),

Y produce el siguiente archivo html.

<!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html>

Esto funciona bien cuando visito la raíz de la aplicación localhost:3000/ , pero falla cuando intento visitar la aplicación desde otra URL, por ejemplo, localhost:3000/items/1 porque los archivos agrupados no se inyectan con una ruta absoluta. Cuando se carga el archivo html, buscará el archivo js dentro del directorio no existente /items porque react-router no se ha cargado todavía.

¿Cómo puedo obtener HtmlWebpackPlugin para inyectar los archivos con una ruta absoluta, por lo que express los buscará en la raíz de mi directorio /dist y no en /dist/items/main-...min.js ? ¿O tal vez puedo cambiar mi servidor express para solucionar el problema?

app.use(express.static(__dirname + ''/../dist'')); app.get(''*'', function response(req, res) { res.sendFile(path.join(__dirname, ''../dist/index.html'')); });

Esencialmente, solo necesito obtener la línea:

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

tener una barra diagonal al comienzo de la fuente.

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


Intente configurar publicPath en la configuración de su paquete web:

output.publicPath = ''/''

HtmlWebpackPlugin usa publicPath para anteponer las URL de las inyecciones.

Otra opción es establecer la base href en el <head> de su plantilla html, para especificar la url base de todas las URL relativas en su documento.

<base href="http://localhost:3000/">


en la configuración del paquete web

config.output.publicPath = ''''

en su index.html

<base href="/someurl/" />

Esto debería hacerlo.