javascript - concepts - webpack wikipedia
¿Qué hace "publicPath" en Webpack? (8)
output.path
Directorio de disco local para almacenar todos sus archivos de salida (ruta absoluta) .
Ejemplo:
path.join(__dirname, "build/")
Webpack enviará todo a
localdisk/path-to-your-project/build/
output.publicPath
Donde subiste tus archivos empaquetados. (Relativo a la raíz del servidor)
Ejemplo:
/assets/
Supongamos que implementó la aplicación en la raíz del servidor
http://server/
.
Al usar
/assets/
, la aplicación encontrará activos de paquete web en:
http://server/assets/
.
Bajo el capó, cada url que encuentre el paquete web se reescribirá para comenzar con "
/assets/
".
src="picture.jpg"➡src="/assets/picture.jpg"Acceso por: (
http://server/assets/picture.jpg)
src="/img/picture.jpg"➡src="/assets/img/picture.jpg"Accedido por: (
http://server/assets/img/picture.jpg)
Los documentos de Webpack
indican que
output.publicPath
es:
El
output.pathdesde la vista de JavaScript.
¿Podría por favor explicar qué significa esto realmente?
Utilizo
output.path
y
output.filename
para especificar dónde Webpack debería 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?"
}
}
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 file-loader o el file-loader file-loader respectivamente.
Por ejemplo: si configura su servidor http para alojar el paquete generado en
/assets/
debe escribir:
publicPath: "/assets/"
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.
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 webpack-dev-server . 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 un ejemplo de configuración:
//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.
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 tengo que hacer es establecer publicpath igual a http://my.cdn.com/ y webpack agregará automáticamente ese prefijo
publicPath es utilizado por webpack para reemplazar la ruta relativa definida en su CSS para referirse a la imagen y al archivo de fuente.
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 carpeta
src
y configura su paquete web para construir 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''
, para que en su html, pueda hacer referencia a su js con
<script src="/webroot/public/assets/bundle.js"></script>
.
cuando solicita
webroot/public/assets/bundle.js
el
webpack-dev-server
find encontrará 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 una sola página 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
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 para 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 mapear entre
virtual directory
en su servidor y
output directory
especificado por la configuración de output.path, cada vez que llega la solicitud de archivo
public / assets / js / app.js
, el archivo
/examples/dist/app.js
será servido