¿Qué hace "publicPath" en Webpack?

250

Los documentos de Webpack indican que output.publicPathes:

El output.pathde la vista del JavaScript.

¿Podría por favor explicar qué significa esto realmente?

Utilizo output.pathy output.filenamepara especificar dónde Webpack debería generar 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?"   
  } 
}

javascript webpack

— Misha Moroshko
fuente

17

Me gustaría agregar a esta pregunta: ¿cuándo usarías pathy cuándo usarías publicPath?

— wmock

1

La respuesta está aquí: github.com/webpack/docs/wiki/configuration#outputpublicpath

— mqklin

Si ayuda: tomasalabes.me/blog/_site/web-development/2016/12/10/…

— talabes

66

Alguien en su equipo de desarrollo debería despertarse. Muchos hacen esta pregunta

— Royi Namir

Aquí están los documentos para webpack2 .

— Eliran Malka

133

`output.path`

Directorio 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.publicPath`

Donde subiste tus archivos empaquetados. (Relativo a la raíz del servidor)

Ejemplo: /assets/

Se supone que implementó la aplicación en la raíz del servidor http://server/.

Mediante el uso /assets/, la aplicación va a encontrar webpack activos en: http://server/assets/. Bajo el capó, cada url que encuentre el paquete web se reescribirá 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)

— Kevin Law
fuente

65

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 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 /assets/, debe escribir:publicPath: "/assets/"

— Johannes Ewald
fuente

3

¿Me puede decir dónde se encuentra la carpeta de activos? Me gustaría ver los archivos dentro de la carpeta de activos Gracias.

— Gauti

53

~~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 todos sus archivos fuente js en la srccarpeta y configura su paquete web para construir el archivo fuente en la distcarpeta 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', para que en su html, pueda hacer referencia a su js <script src="/webroot/public/assets/bundle.js"></script>.

cuando se solicita webroot/public/assets/bundle.jsla webpack-dev-serverencontrará el 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 asincrónicamente paquetes de scripts en producción. Supongamos que tiene una aplicación de página única muy grande (por ejemplo, Facebook). Facebook no querría servir todos sus 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 va a su perfil, carga un poco más de JavaScript para esa página con ajax. Esta opción le dice desde qué parte de su servidor cargar ese paquete

— Sean
fuente

1

No es solo para fines de desarrollo, la respuesta de @jhnns explica cómo afecta a las salidas del cargador.

— Wen

es lo mismo no? esta propiedad le dice a su cargador y a su middleware dónde encontrar los activos reales, con suerte no usará webpackmiddleware o webpack-dev-server en su entorno de producción, por lo que creo que esto es solo para el entorno de desarrollo, consulte webpack.github .io / docs / webpack-dev-server.html

— Sean

1

De este webpack.github.io/docs/configuration.html#output-publicpath parece que esta opción le dice a webpack que complete la url o ruta correcta de los activos en los archivos generados, no solo para middlewares. Al ejecutar el servidor de desarrollo, creo que el middleware busca publichPathsecuestrar solicitudes y devolver los archivos en memoria.

— Wen

exactamente, en su entorno de producción, usará webpack -ppara construir sus activos, y sus activos deben ser atendidos por su servidor de aplicaciones o su servidor nginx en lugar de servidor webpack o middleware webpack, por lo que esta configuración ya no es útil en el entorno de producción, ¿estoy en lo cierto? ?

— Sean

77

No, esta opción es útil en el servidor de desarrollo, pero su intención es cargar asincrónicamente paquetes de scripts en producción. Supongamos que tiene una aplicación de página única muy grande (por ejemplo, Facebook). Facebook no querría servir todos sus 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 va a su perfil, carga un poco más de JavaScript para esa página con ajax. Esta opción le indica desde qué parte de su servidor cargar ese paquete

— Charlie Martin

19

Puede usar publicPath para señalar la ubicación donde desea que webpack-dev-server sirva sus archivos "virtuales". La opción publicPath será la misma ubicación de la opción de compilación de contenido para webpack-dev-server. webpack-dev-server crea archivos virtuales que usará cuando lo inicies . Estos archivos virtuales se parecen a los archivos empaquetados reales que crea el paquete web. Básicamente, querrá que la opción --content-base apunte al directorio en el que se encuentra su index.html. Aquí hay una configuración de ejemplo:

//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js


//webpack.config.js
var path = require("path");
module.exports = {
...
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};  


//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>

//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build

webpack-dev-server ha creado una carpeta de activos virtuales junto con un archivo virtual bundle.js al que hace referencia. Puede probar esto yendo a localhost: 8080 / assets / bundle.js y luego verifique en su aplicación estos archivos. Solo se generan cuando ejecuta webpack-dev-server.

— Isaac Pak
fuente

Es una buena explicación, pero si me muevo a producción o /build/bundle.jsrealizo la compilación a mano , ¿tendré que cambiarla srcen mi index.htmlarchivo, verdad?

— ArchNoob

Lo siento por la respuesta tardía. No tiene que cambiar el src. Ya sea que esté en producción o desarrollo, webpack creará un bundle.js en la ruta de salida. En el ejemplo anterior será /build/bundle.js.

— Isaac Pak

Gracias, estoy preguntando sobre la srclínea en el archivo index.html. En este momento está apuntando a "assets/bundle.js"si pasará a producción en el paquete estará, "build/bundle.js"así que tendré que cambiar eso en la línea html src a src="build/bundle.js". ¿O hay una forma más automatizada?

— ArchNoob

2

Entiendo tu pregunta ahora. Sí, deberá cambiar el src para compilar / bundle.js para la producción. En cuanto a una forma automatizada de hacer esto, no estoy seguro. He visto a otros crear 2 archivos webpack.config.js diferentes, uno para producción y otro para desarrollo. Probablemente haya una forma programática como si (ENV === producción) hiciera esto ... pero no lo he intentado.

— Isaac Pak

@ArchNoob Solo un aviso sobre cómo hago esto en producción ahora. No cambié el valor src, sino que cambié mi valor publicPath de /assets/a /build. De esta manera no tengo que cambiar mi index.html. También moví mi index.html fuera de la carpeta de compilación y en la raíz de la aplicación.

— Isaac Pak

15

en mi caso, tengo un cdn, y voy a colocar todos mis archivos estáticos procesados (js, imgs, fonts ...) en mi cdn, supongamos que la url es http://my.cdn.com/

así que si hay un archivo js que es la url de referencia original en html es './js/my.js', debería convertirse en http://my.cdn.com/js/my.js en el entorno de producción

en ese caso, lo que necesito hacer es configurar publicpath igual a http://my.cdn.com/ y webpack agregará automáticamente ese prefijo

— Kent Wood
fuente

No parece agregar ningún prefijo en mi caso.

— Param Singh

14

filename especifica el nombre del archivo en el que se acumulará todo el código incluido después de pasar por el paso de compilación.

ruta especifica el directorio de salida donde se guardará el archivo app.js (nombre de archivo) en el disco. Si no hay un directorio de salida, webpack creará ese directorio por usted. por ejemplo:

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

Esto creará un directorio myproject / examples / dist y en ese directorio creará app.js , /myproject/examples/dist/app.js . Después de compilar , puede navegar a myproject / examples / dist / app.js para ver el código incluido

publicPath: "¿Qué debo poner aquí?"

publicPath especifica el directorio virtual en el servidor web desde donde se servirá el archivo empaquetado, app.js. Tenga en cuenta que el servidor de palabras cuando usa publicPath puede ser webpack-dev-server o express server u otro servidor que puede usar con webpack.

por ejemplo

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

esta configuración le dice a webpack que agrupe todos sus archivos js en examples / dist / app.js y escriba en ese archivo.

publicPath le dice a webpack-dev-server o express server que sirva este archivo incluido, es decir, ejemplos / dist / app.js desde la ubicación virtual especificada en el servidor, es decir, / public / assets / js. Entonces, en su archivo html, debe hacer referencia a este archivo como

<script src="public/assets/js/app.js"></script>

En resumen, publicPath es como un mapeo entre virtual directoryen su servidor y output directoryespecificado por la configuración de output.path, cada vez que llega la solicitud de archivo public / assets / js / app.js , se servirá el archivo /examples/dist/app.js

— udeep shrestha
fuente

2

Bien explicado !

— Ganesh Pandey

3

La documentación de webpack2 explica esto de una manera mucho más limpia: https://webpack.js.org/guides/public-path/#use-cases

webpack tiene una configuración muy útil que le permite especificar la ruta base para todos los activos en su aplicación. Se llama publicPath.

— Alan
fuente

2

publicPath es utilizado por webpack para reemplazar la ruta relativa definida en su CSS para referirse a la imagen y al archivo de fuente.

— Khalid Azam
fuente