Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 4H : 3M : 39S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Conceptos básicos

2/28

📖 Conceptos básicos

<h4>Ideas/conceptos claves</h4>

Webpack es un paquete de módulos estáticos para aplicaciones de JS modernas

Loader Te permite hacer un bundle de cualquier recurso estático más allá de JavaScript

Plugins Extienden recursos para añadir configuraciones y particularidades de recursos externos

<h4>Apuntes</h4>
  • Webpack construye un gráfico de dependencias que mapea cada módulo para con verlo en uno o más módulos
  • Desde webpack 4 ya no dependemos de tener un archivo de configuración, pero si debemos tener un punto de entrada
  • Tambien tendremos que tener un punto de salida
    • En este punto se creará nuestro proyecto una vez esté preparado
    • Normalmente es la carpeta dist ⇒ Distribution
  • Tambien contamos con diferentes modos
    • Modo de desarrollo
    • Modo de producción
    • Modos de performance
      • Donde tu añades
        • Configuraciones de minificación
        • Donde se va enviar
        • Carpeta de destino
    • Modos de desarrollo local
      • Donde puedes
        • Crear puertos específicos para tu proyecto
        • Ver cambios en tiempo real
  • Dispone de loader y plugins permitiéndonos preparar particularidades de nuestro proyecto

Conceptos Básicos Webpack
.
Entry (punto de entrada): este le indica a webpack cual modulo de JavaScript debe de usar para empezar a crear una salida.
Ejemplo : index.js. también podemos tener múltiples puntos de entrada pero eso es otra historia.
.
Output (punto de salida): Este archivo es el bundle o nuestro archivo de salida, seria nuestra caja donde empaquetamos toda nuestra aplicación, normalmente este archivo final se crea en una carpeta llamada dist
.
Loader (transformador): Los loaders lo que hacen es decirle a webpack como tiene que transformar el código de un modulo en concreto. Ejemplo : Los loaders pueden transformar ficheros a JavaScript, o cargar CSS directamente en archivos JS, (si usas reactjs ya sabrás como)
.
Plugins (complementos): Nos van a ayudar a extender las funcionalidades con los loaders, añadir otras configuraciones.
Ejemplo : hay un modulo llamado HTMLWebpackPlugin que este se encarga de crear un HTML personalizado que le inyecta todos los bundles finales que compilamos.

apuentes de la clase y con aportes de compañeros, conceptosBasicosWebpack.jpg

Babel es un compilador al cual se le puede considerar también un loader?

**Resumen: **
Antes de empezar a trabjar con Webpack necesitamos primero entender conceptos básicos de este:
Entry(entrada): Le indicamos a webpack el modulo que le va a servir como punto de entrada y este se encargará de buscar los demás modulos relacionados. normalmente es Index.js pero le podemos indicar el que queramos

Output(salida): Basicamente es donde webpack va a ingresar los bundles que ha creado y normalmente es ./dist

Loaders(cargadores): webpack solo entiende js y Json files así que, estos loaders nos permiten convertir otros archivos a lo que webpack puede entender y los añade al gráfico de dependecias.

Plugins(complementos): estos extienden las funcionalidades de los loaders, por ejemplo como para convertir ciertos tipos de archivos o para mejorar el performance.

Este es el curso que necesitabamos para no perdernos tanto en los cursos de server-side-rendering y en el curso de practico de react ya que se usa mucho webpack, ya no me siento perdido 😏 gracias a este curso

<h3>Conceptos</h3>

.
En esencia, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas. Cuando webpack procesa su aplicación, crea internamente un gráfico de dependencia que mapea cada módulo que su proyecto necesita y genera uno o más paquetes.

Desde la versión 4.0.0, webpack no requiere un archivo de configuración para empaquetar su proyecto. Sin embargo, es increíblemente configurable para adaptarse mejor a sus necesidades.
.

<h4>Entry</h4>

Un punto de entrada indica qué módulo webpack debe usar para comenzar a construir su gráfico de dependencia interna. webpack averiguará de qué otros módulos y bibliotecas depende ese punto de entrada (directa e indirectamente).
.

De forma predeterminada, su valor es ./src/index.js, pero puede especificar un punto de entrada diferente (o varios) estableciendo una propiedad de entrada en la configuración del paquete web. Por ejemplo:
.
webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};
<h4>EntryDescription object</h4>

.
Un objeto con descripción del punto de entrada. Puede especificar las siguientes propiedades.
.

  • dependOn: Los puntos de entrada de los que depende el punto de entrada actual. Deben cargarse antes de que se cargue este punto de entrada.
  • filename: Especifica el nombre de cada archivo de salida en el disco.
  • import: Módulos que se cargan al inicio.
  • library: Específica library options para agrupar una biblioteca de la entrada actual.
  • runtime: El nombre del fragmento de tiempo de ejecución. Si se establece, se crea un fragmento de tiempo de ejecución con este nombre; de lo contrario, se utiliza un punto de entrada existente como tiempo de ejecución.

Nunca me senti tan confundido hasta ahora!

Si sos nuevo en el mundo de Webpack, te recomiendo realmente que primero veas este tutorial (o que lo tengas guadado por si las moscas)
.
https://www.youtube.com/watch?v=vF2emKbaP4M
.
En una hora te explica los fundamentos de una forma super intuitiva, me ayudo a entender este curso al 100% y aprovechar todo lo que el profe ofrece =)

Feliz dia. Estoy recien comenzando este curso. Mi pregunta es: Tengo que saber algo de programacion antes de continuar?
}

Webpack es un paquete de módulos estáticos para aplicaciones de JS modernas

<h4>Conceptos básicos</h4>

Un paquete de módulos estáticos para JS moderno. Webpack mapea los distintos módulos para convertirlo todo en 1 o varios, según sea el caso. Podemos trabajar en modo de desarrollo, producción y recompilar archivos para visualizar los cambios. webpack dispone de loaders y plugins.

Con React podemos usar XML y HTML.

Webpack se define como un paquete de módulos estáticos para aplicaciones de JavaScript modernas. Su funcionamiento consiste en hacer un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más módulos según el caso.

A partir de Webpack 4 ya no es necesario tener un archivo de configuración, sino que se puede trabajar con un estándar que se crea.

Un proyecto con Webpack debe tener un archivo específico de entrada del que va a partir toda la aplicación y un punto de salida donde será creado el proyecto procesado por Webpack, comúnmente es llamada dist.

Webpack también dispone de loaders y plugins que nos ayudan a trabajar con las particularidades de cada proyecto, los loaders se utilizan para entender lenguajes en particular como JSX, XML, etc. Y los plugins extenderán la funcionalidad de Webpack.

También cuenta con configuraciones más avanzadas con las que se pueden configurar cosas como la forma en la que el código se va a minificar, hacía donde se va a enviar y más.

Conceptos básicos


Debemos entender que webpack construye un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más módulos (según sea el caso).

Tener cuenta que tenemos que tendremos un punto de entrada y un punto de salida.

El punto de salida suele estar dentro de la carpeta dist (abreviación de Distribution).

Otra cosa que le da valor a webpack son los loaders y plugins.

Conceptos básicos


Antes de comenzar con Webpack, debemos entender las particularidades que lo conforman para poder trabajar con el.

En este caso lo debemos definir como un paquete de módulos estáticos para aplicaciones de Javascript modernas. Construye un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más según sea el caso.

Teniendo todo esto en cuenta, tendremos algunas particularidades clave. Trabajaremos con un estándar que se crea. Para esto debemos entender que tenemos un punto de entrada, dentro de una carpeta específica y un archivo llamado index.js que a partir de ahí, se unen todos los elementos.

Y también un punto de salida donde será creado nuestro proyecto por medio de Webpack, normalmente es la carpeta dist donde se distribuyen todas las dependencias del proyecto.

📖 Conceptos básicos

<h4>Ideas/conceptos claves</h4>

Webpack es un paquete de módulos estáticos para aplicaciones de JS modernas

Loader Te permite hacer un bundle de cualquier recurso estático más allá de JavaScript

Plugins Extienden recursos para añadir configuraciones y particularidades de recursos externos

<h4>Apuntes</h4>
  • Webpack construye un gráfico de dependencias que mapea cada módulo para con verlo en uno o más módulos
  • Desde webpack 4 ya no dependemos de tener un archivo de configuración, pero si debemos tener un punto de entrada
  • Tambien tendremos que tener un punto de salida
    • En este punto se creará nuestro proyecto una vez esté preparado
    • Normalmente es la carpeta dist ⇒ Distribution
  • Tambien contamos con diferentes modos
    • Modo de desarrollo
    • Modo de producción
    • Modos de performance
      • Donde tu añades
        • Configuraciones de minificación
        • Donde se va enviar
        • Carpeta de destino
    • Modos de desarrollo local
      • Donde puedes
        • Crear puertos específicos para tu proyecto
        • Ver cambios en tiempo real
  • Dispone de loader y plugins permitiéndonos preparar particularidades de nuestro proyecto

Conceptos Básicos Webpack
.
Entry (punto de entrada): este le indica a webpack cual modulo de JavaScript debe de usar para empezar a crear una salida.
Ejemplo : index.js. también podemos tener múltiples puntos de entrada pero eso es otra historia.
.
Output (punto de salida): Este archivo es el bundle o nuestro archivo de salida, seria nuestra caja donde empaquetamos toda nuestra aplicación, normalmente este archivo final se crea en una carpeta llamada dist
.
Loader (transformador): Los loaders lo que hacen es decirle a webpack como tiene que transformar el código de un modulo en concreto. Ejemplo : Los loaders pueden transformar ficheros a JavaScript, o cargar CSS directamente en archivos JS, (si usas reactjs ya sabrás como)
.
Plugins (complementos): Nos van a ayudar a extender las funcionalidades con los loaders, añadir otras configuraciones.
Ejemplo : hay un modulo llamado HTMLWebpackPlugin que este se encarga de crear un HTML personalizado que le inyecta todos los bundles finales que compilamos.

apuentes de la clase y con aportes de compañeros, conceptosBasicosWebpack.jpg

Babel es un compilador al cual se le puede considerar también un loader?

**Resumen: **
Antes de empezar a trabjar con Webpack necesitamos primero entender conceptos básicos de este:
Entry(entrada): Le indicamos a webpack el modulo que le va a servir como punto de entrada y este se encargará de buscar los demás modulos relacionados. normalmente es Index.js pero le podemos indicar el que queramos

Output(salida): Basicamente es donde webpack va a ingresar los bundles que ha creado y normalmente es ./dist

Loaders(cargadores): webpack solo entiende js y Json files así que, estos loaders nos permiten convertir otros archivos a lo que webpack puede entender y los añade al gráfico de dependecias.

Plugins(complementos): estos extienden las funcionalidades de los loaders, por ejemplo como para convertir ciertos tipos de archivos o para mejorar el performance.

Este es el curso que necesitabamos para no perdernos tanto en los cursos de server-side-rendering y en el curso de practico de react ya que se usa mucho webpack, ya no me siento perdido 😏 gracias a este curso

<h3>Conceptos</h3>

.
En esencia, webpack es un paquete de módulos estáticos para aplicaciones JavaScript modernas. Cuando webpack procesa su aplicación, crea internamente un gráfico de dependencia que mapea cada módulo que su proyecto necesita y genera uno o más paquetes.

Desde la versión 4.0.0, webpack no requiere un archivo de configuración para empaquetar su proyecto. Sin embargo, es increíblemente configurable para adaptarse mejor a sus necesidades.
.

<h4>Entry</h4>

Un punto de entrada indica qué módulo webpack debe usar para comenzar a construir su gráfico de dependencia interna. webpack averiguará de qué otros módulos y bibliotecas depende ese punto de entrada (directa e indirectamente).
.

De forma predeterminada, su valor es ./src/index.js, pero puede especificar un punto de entrada diferente (o varios) estableciendo una propiedad de entrada en la configuración del paquete web. Por ejemplo:
.
webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};
<h4>EntryDescription object</h4>

.
Un objeto con descripción del punto de entrada. Puede especificar las siguientes propiedades.
.

  • dependOn: Los puntos de entrada de los que depende el punto de entrada actual. Deben cargarse antes de que se cargue este punto de entrada.
  • filename: Especifica el nombre de cada archivo de salida en el disco.
  • import: Módulos que se cargan al inicio.
  • library: Específica library options para agrupar una biblioteca de la entrada actual.
  • runtime: El nombre del fragmento de tiempo de ejecución. Si se establece, se crea un fragmento de tiempo de ejecución con este nombre; de lo contrario, se utiliza un punto de entrada existente como tiempo de ejecución.

Nunca me senti tan confundido hasta ahora!

Si sos nuevo en el mundo de Webpack, te recomiendo realmente que primero veas este tutorial (o que lo tengas guadado por si las moscas)
.
https://www.youtube.com/watch?v=vF2emKbaP4M
.
En una hora te explica los fundamentos de una forma super intuitiva, me ayudo a entender este curso al 100% y aprovechar todo lo que el profe ofrece =)

Feliz dia. Estoy recien comenzando este curso. Mi pregunta es: Tengo que saber algo de programacion antes de continuar?
}

Webpack es un paquete de módulos estáticos para aplicaciones de JS modernas

<h4>Conceptos básicos</h4>

Un paquete de módulos estáticos para JS moderno. Webpack mapea los distintos módulos para convertirlo todo en 1 o varios, según sea el caso. Podemos trabajar en modo de desarrollo, producción y recompilar archivos para visualizar los cambios. webpack dispone de loaders y plugins.

Con React podemos usar XML y HTML.

Webpack se define como un paquete de módulos estáticos para aplicaciones de JavaScript modernas. Su funcionamiento consiste en hacer un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más módulos según el caso.

A partir de Webpack 4 ya no es necesario tener un archivo de configuración, sino que se puede trabajar con un estándar que se crea.

Un proyecto con Webpack debe tener un archivo específico de entrada del que va a partir toda la aplicación y un punto de salida donde será creado el proyecto procesado por Webpack, comúnmente es llamada dist.

Webpack también dispone de loaders y plugins que nos ayudan a trabajar con las particularidades de cada proyecto, los loaders se utilizan para entender lenguajes en particular como JSX, XML, etc. Y los plugins extenderán la funcionalidad de Webpack.

También cuenta con configuraciones más avanzadas con las que se pueden configurar cosas como la forma en la que el código se va a minificar, hacía donde se va a enviar y más.

Conceptos básicos


Debemos entender que webpack construye un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más módulos (según sea el caso).

Tener cuenta que tenemos que tendremos un punto de entrada y un punto de salida.

El punto de salida suele estar dentro de la carpeta dist (abreviación de Distribution).

Otra cosa que le da valor a webpack son los loaders y plugins.

Conceptos básicos


Antes de comenzar con Webpack, debemos entender las particularidades que lo conforman para poder trabajar con el.

En este caso lo debemos definir como un paquete de módulos estáticos para aplicaciones de Javascript modernas. Construye un gráfico de dependencias que mapea cada módulo para convertirlo en uno o más según sea el caso.

Teniendo todo esto en cuenta, tendremos algunas particularidades clave. Trabajaremos con un estándar que se crea. Para esto debemos entender que tenemos un punto de entrada, dentro de una carpeta específica y un archivo llamado index.js que a partir de ahí, se unen todos los elementos.

Y también un punto de salida donde será creado nuestro proyecto por medio de Webpack, normalmente es la carpeta dist donde se distribuyen todas las dependencias del proyecto.