Material para la charla "Webpack desde cero" para JS Cáceres

En esta charla realizaremos una introducción a los módulos JavaScript, formatos y empaquetadores, continuaremos hablando de Webpack, qué es y cómo utilizarlo. Realizaremos un ejemplo de configuración de Webpack desde cero, agregando distintos elementos como loaders y plugins, viendo como funciona cada una de estas partes.

Instalación

$ npm install

Ejemplos

Sobrescribiendo entry / output

$ npm run custom

Entry point / Output

$ npm run entry-output

Css loader / Style loader

$ npm run loader-css-style

MiniCssExtractPlugin

$ npm run plugin-css-extract

Múltiples entry points

$ npm run multi-entry-pointst

Webpack DevServer

$ npm run webpack-dev-server

Babel loader

$ npm run loader-babel

Url loader (imágenes)

$ npm run loader-url-images

Url loader (fuentes)

$ npm run loader-url-fonts

File loader

$ npm run loader-files

Json loader

$ npm run loader-json

React

$ npm run react

Sass loader

$ npm run loader-sass

Separación de librerías

$ npm run commons-chunk

Carga asíncrona

$ npm run dynamic-import