Preparación de Webpack, Babel, PostCSS y Assets

Clase 7 de 22 • Curso de Server Side Render con Express 2019

Clase anteriorSiguiente clase

Javier Fuentes Mora

teacher•

demasiados errores en un solo video

Alan Alexis Arostegui Maranto

student•

npm i postcss-loader

David Camacho

student•

En el archivo .babelrc se fue un typo en el array de plugins: "babel-plugitransform-object-assign". Acá lo dejo corregido:

"plugins": [
  "transform-class-properties",
  "react-hot-loader/babel",
  "babel-plugin-transform-object-assign"
]

En el archivo webpack.config.js:

The LoaderOptionsPlugin is unlike other plugins in that it is built for migration from webpack 1 to 2. In webpack 2, the schema for a webpack.config.js became stricter; no longer open for extension by other loaders and plugins. The intention is that you pass options directly to loaders and plugins (i.e. options are not global or shared)

En resumen:

instancien webpack en una variable:

const webpack = require('webpack');

De esa variable si extiende LoaderOptionsPlugin:

new webpack.LoaderOptionsPlugin({ ... });

PD: Instalen las dependencias necesarias (las que han dejado en acá en los comentarios).

Beatriz Pérez Santana

student•

Yo autoprefixer no lo tenía instalado y me daba error. Para instalarlo:

npm install autoprefixer

Daniel Alberto Esquinazi

student•

npm i babel-plugin-transform-class-properties react-hot-loader babel-plugin-transform-object-assign

Rob Arroyo

student•

Como dice @deveeup, instalen las dependencias que dicen en los comentarios. Después de eso, si tienen problemas con postcss al compilar, solo pasen al siguiente video :D

Alexis Alberto Texis Auza

student•

Por que es necesario usar el plugin transform-object-assing?

Daniel Esteves

student•

¡Hola! Es para que el navegador pueda interpretar como leer los Objects, puedes ver más en babel-plugin-transform-object-assign

Milton Cesar Catalan Parra

student•

muchos errores podría ser mas ordenado.

Preparación de Webpack, Babel, PostCSS y Assets

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso