Preparación de Webpack, Babel, PostCSS y Assets

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

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.