¿Qué hace "publicPath" en Webpack?
Los documentos de Webpack indican que output.publicPathes:
Desde
output.pathla vista de JavaScript.
¿Podría explicarnos qué significa esto realmente?
Utilizo output.pathy output.filenamepara especificar dónde debe generar Webpack el resultado, pero no estoy seguro de qué poner output.publicPathy si es necesario.
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
output.path
Directorio del disco local para almacenar todos sus archivos de salida (ruta absoluta) .
Ejemplo: path.join(__dirname, "build/")
Webpack generará todo enlocaldisk/path-to-your-project/build/
output.publicPath
Dónde subiste tus archivos empaquetados. (ruta absoluta o relativa al archivo HTML principal)
Ejemplo: /assets/
Supuso que implementó la aplicación en la raíz del servidor http://server/.
Al utilizar /assets/, la aplicación encontrará recursos del paquete web en: http://server/assets/. Debajo del capó, todas las URL que encuentre el paquete web se reescribirán para comenzar con " /assets/".
src="picture.jpg"Reescribe ➡src="/assets/picture.jpg"Accedido por: (
http://server/assets/picture.jpg)
src="/img/picture.jpg"Reescribe ➡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 utiliza la división de código ) o archivos referenciados cargados a través del cargador de archivos o del cargador de URL , respectivamente.
Por ejemplo: si configura su servidor http para alojar el paquete generado, /assets/debe escribir:publicPath: "/assets/"
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.
Supongamos que coloca todo su archivo fuente js en srcla carpeta y configura su paquete web para crear el archivo fuente en distla carpeta 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 pueda hacer referencia a su js con <script src="/webroot/public/assets/bundle.js"></script>.
cuando solicite webroot/public/assets/bundle.js, encontrará webpack-dev-serverel js en la carpeta dist
Actualizar:
gracias a charlie martin por 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 asincrónica en producción. Supongamos que tiene una aplicación de una sola página muy grande (por ejemplo, Facebook). Facebook no querría mostrar todo su javascript cada vez que cargas la página de inicio, por lo que solo muestra 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 en qué parte de su servidor cargar ese paquete desde
