Los documentos de Webpack indican que output.publicPath es:
El
output.pathdesde la vista de JavaScript.
¿Podría explicar qué significa esto realmente?
Uso output.path y output.filename para especificar dónde Webpack debe generar el resultado, pero no estoy seguro de qué poner en output.publicPath y si es necesario.
module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } }output.pathDirectorio de disco local para almacenar todos sus archivos de salida (ruta absoluta) .
Ejemplo: path.join(__dirname, "build/")
Webpack generará todo en localdisk/path-to-your-project/build/
output.publicPathDónde cargó los archivos incluidos. (ruta absoluta o relativa al archivo HTML principal)
Ejemplo: /assets/
Asumió que implementó la aplicación en la raíz del servidor http://server/ .
Al usar /assets/ , la aplicación encontrará activos de paquetes web en: http://server/assets/ . Debajo del capó, todas las direcciones URL que encuentre el paquete web se reescribirán para comenzar con " /assets/ ".
src="picture.jpg"➡src="/assets/picture.jpg"Accedido por: (
http://server/assets/picture.jpg)
src="/img/picture.jpg"➡src="/assets/img/picture.jpg"Accedido por: (
http://server/assets/img/picture.jpg)
Cuando se ejecuta en el navegador, el paquete web necesita saber dónde alojará el paquete generado. Por lo tanto, puede solicitar fragmentos adicionales (cuando se usa la división de código ) o archivos de referencia cargados a través del cargador de archivos o el cargador de URL, respectivamente.
Por ejemplo: si configura su servidor http para alojar el paquete generado en /assets/ , debe escribir: publicPath: "/assets/"
el publicPath solo se usa para fines de desarrollo , estaba confundido la primera vez que vi esta propiedad de configuración, pero tiene sentido ahora que he usado webpack por un tiempo
suponga que coloca todo su archivo fuente js en la carpeta src y configura su paquete web para compilar el archivo fuente en la carpeta dist con output.path .
Pero desea servir sus activos estáticos en una ubicación más significativa como webroot/public/assets , esta vez puede usar out.publicPath='/webroot/public/assets' , de modo que en su html, puede hacer referencia a su js con <script src="/webroot/public/assets/bundle.js"></script> .
cuando solicita webroot/public/assets/bundle.js webpack-dev-server encontrará js en la carpeta dist
Actualizar:
gracias por Charlie Martin para corregir mi respuesta
original: publicPath solo se usa para fines de desarrollo, esto no es solo para fines de desarrollo
No, esta opción es útil en el servidor de desarrollo, pero su intención es cargar paquetes de scripts de forma asíncrona en producción. Digamos que tiene una aplicación de una sola página muy grande (por ejemplo, Facebook). Facebook no querría servir todo su javascript cada vez que carga la página de inicio, por lo que solo sirve lo que se necesita en la página de inicio. Luego, cuando vas a tu perfil, carga más javascript para esa página con ajax. Esta opción le indica desde qué parte de su servidor debe cargar ese paquete.