¿Qué es Webpack? y ¿cómo funciona? En esta charla descubriremos las entrañas de Webpack y su funcionamiento, plugins y demas elementos que podemos configurar

1. Aitor chicharro | @krailler
Webpack a fondo

2. about:me
linkedin.com/in/aitorchicharro/
Aitor chicharro
- 26 años
- De Barcelona
- Viviendo en Tenerife desde hace 3 años
- Actualmente trabajando en
como Lead Frontend Developer
Aitor chicharro | @krailler

3. Aitor chicharro | @krailler
¿En qué se basan los proyectos web?

4. Aitor chicharro | @krailler
Claramente tu puedes hacer
esto por tu propia cuenta

5. Aitor chicharro | @krailler
Vamos a surfear con
Webpack

6. Aitor chicharro | @krailler
Webpack es usado por grandes empresas

7. Aitor chicharro | @krailler
“Webpack es un empaquetador de módulos estático
para aplicaciones JavaScript modernas”

8. Aitor chicharro | @krailler
Desde la versión 4.0.0, webpack no
requiere un archivo de configuración para
agrupar su proyecto…

9. Aitor chicharro | @krailler
webpack.js.org

10. Aitor chicharro | @krailler
src/index.js
src/bar.js
Cada archivo tiene su propio scope, aun
que podamos exponer los métodos, o
variables de cada archivo

11. Aitor chicharro | @krailler
Todos en una misma petición
Code splitting
+ una única petición, menos latencia
- obtener todo de una vez
Petición por modulo
+ obtenemos lo que queremos
- mas peticiones => mas overhead
- latencia en las peticiones

12. Aitor chicharro | @krailler
Chunks de modulos
Code splitting
+ obtenemos lo que queremos
+ menos peticiones, menos overhead

13. Aitor chicharro | @krailler
Pero y los otros
archivos?
.css, .png, .jsx, .vue, .svg, .woff,
.json, .stylus, .html, .eot, .jpeg,
.wtf

14. Aitor chicharro | @krailler
Loaders!

15. Aitor chicharro | @krailler
Conceptos de webpack
Entry
Output
Loaders
Plugins
Mode

16. Aitor chicharro | @krailler
loaders
Webpack solo entiende de archivos JS y JSON

17. Aitor chicharro | @krailler
Los loaders permiten que webpack procese otros tipos
de archivos y los convierta en módulos válidos que su
aplicación puede consumir y agregar al gráfico de
dependencia.

18. Aitor chicharro | @krailler
webpack.js.org/loaders
Hay muchísimos loaders para webpack
- Procesamiento de archivos (.css, .jpeg, etc..)
- Transpiladores (Babel, Typescript, etc..)
- Plantillas (HTML, jade, markdown, twig, etc..)
- Estilos (Less, Sass, PostCSS, Stylus, etc..)
- Linting & Testing (Mocha, eslint, etc..)
- Frameworks (Vue, Polimer, Angular)
github.com/webpack-contrib/awesome-webpack#loaders

19. Aitor chicharro | @krailler
Y… los plugins
webpack.js.org/plugins

20. Aitor chicharro | @krailler
Mientras que los loaders se utilizan para transformar
ciertos tipos de módulos, los plugins se pueden
aprovechar para realizar muchísimas mas tareas como
la optimización de paquetes, la gestión de archivos y la
inyección de variables de entorno.

21. Aitor chicharro | @krailler
Entry Loaders + plugins Output

22. Aitor chicharro | @krailler
Empecemos

23. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras

24. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras

25. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
webpack.config.js

26. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
webpack.config.js
Entry: src/index.js
Output: dist/main.js

27. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
src/index.js

28. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
Build Webpack

29. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
Build Webpack
Ejecutamos el
comando que
ejecuta el script
“start” de nuestro
package.json
Ejecuta webpack
Vemos el archivo
de salida

30. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
HtmlWebpackPlugin
github.com/jantimon/html-webpack-plugin

31. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
HtmlWebpackPlugin

32. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
Build Webpack

33. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
Build Webpack
Output

34. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
index.html

35. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
index.html
Nuestro bundle

36. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
Chrome

37. Aitor chicharro | @krailler
Pero.. ¿Tengo que ejecutar
siempre el comando por cada
cambio?

38. Aitor chicharro | @krailler
Webpack watch mode

39. Aitor chicharro | @krailler
Muchas de las opciones de configuración
pueden ser incluidas inline

40. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
style-loader & css-loader

41. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras

42. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
Testea nuestro
import usando un
regex
Usa css-loader y
luego style-loader

43. Aitor chicharro | @krailler
Los loaders también pueden ser cargados desde
nuestro mismo código

44. Aitor chicharro | @kraillerInstalación > configuración > entry > plugins > loaders > extras
style-loader & css-loader

45. Aitor chicharro | @krailler
Los loaders se aplicarán de derecha a izquierda.
De el último al primero configurado

46. Aitor chicharro | @krailler
Más sobre loaders…

47. Aitor chicharro | @krailler
Usando babel
Instalación > configuración > entry > plugins > loaders > extras

48. Aitor chicharro | @krailler
Usando babel con jsx
Instalación > configuración > entry > plugins > loaders > extras

49. Aitor chicharro | @krailler
el ultimo concepto el
Mode
Instalación > configuración > entry > plugins > loaders > extras

50. Aitor chicharro | @krailler
La opción de modo le dice a webpack que use sus
optimizaciones integradas
Instalación > configuración > entry > plugins > loaders > extras

51. Aitor chicharro | @krailler
Optimizaciones que ofrece
Instalación > configuración > entry > plugins > loaders > extras

52. Aitor chicharro | @krailler
Usandolo desde el terminal
Instalación > configuración > entry > plugins > loaders > extras

53. Aitor chicharro | @krailler
Target
Webpack puede compilar para múltiples entornos o destinos.

54. Aitor chicharro | @krailler
Diferentes targets

55. Aitor chicharro | @krailler
Hot Module Replacement
Hot Module Replacement (HMR) intercambia, agrega o elimina
módulos mientras una aplicación se está ejecutando, sin una
recarga completa

56. Aitor chicharro | @krailler
Retener el estado de la aplicación que se pierde durante una
recarga completa

57. Aitor chicharro | @krailler
Ahorro valioso de tiempo de desarrollo actualizando solo lo que
ha cambiado

58. Aitor chicharro | @krailler
Las modificaciones realizadas en CSS o JS en el código fuente
dan como resultado una actualización instantánea en el
navegador

59. Aitor chicharro | @krailler
webpack.js.org/guides/development/#using-webpack-dev-server

60. Aitor chicharro | @krailler

61. Aitor chicharro | @krailler

62. Aitor chicharro | @krailler

63. Aitor chicharro | @krailler
Inicia nuestro servidor
de desarrollo
Nuestro comando con
configuración inline
Comando que se
ejecuta antes del
build:prod
Comando para hacer
build en modo
producción
Lo mismo que *:prod
pero en modo
desarrollo

64. Aitor chicharro | @krailler
Webpack soporta también varias
configuraciones al mismo tiempo

65. Aitor chicharro | @krailler
Webpack soporta también varias
configuraciones al mismo tiempo

66. ¡Gracias!
linkedin.com/in/aitorchicharro/
@krailler
¿Preguntas?
We are hiring in tgx.es
Apply now bit.ly/GXReact