Usando Plugins y vendor file en Webpack

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

Resumen

El vendor file contiene todas nuestras dependencias del proyecto.

Nadir Antonio Soza Solis

student•

Van dos videos escribiendo y escribiendo configuraciones que al no ver el funcionamiento no logro entender para que sirve cada una.

Alexander Henry Obispo Buendia

student•

De los peores cursos que he tomado...

Kevin Morales

student•

Cuéntanos por qué dices eso? Cómo puede mejorar el curso?

Andres Felipe Valencia Benitez

student•

  optimization: {
    splitChunks: {
      chunks: 'async',
      name: true,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: 'assets/vendor.js',
          enforce: true,
          test(module, chunks) {
            const name = module.nameForCondition && module.nameForCondition();
            return chunks.some((chunk) => chunk.name !== 'vendor' && /[\\/]node_modules[\\/]/.test(name));
          },
        },
      },
    },
  },

Chavez

student•

Muy mal el curso, la explicación y el código pésimo

Jorge Méndez Ortega

student•

Que es mejor utilizar Vendor o DLL ya que entiendo que es prácticamente lo mismo solo que para el DLL se genera el empaquetada a parte esto es lo que le permite mejorar tiempos de transpiración y dicho archivo también tiene el código de las dependencias utilizadas.

Enrique Devars

teacher•

Hice pruebas en un proyecto usando dll y vendor, y el bundle más reducido fue usando el dll

Didier Zúñiga

student•

Estoy obteniendo este error y no he podido ver como resolverlo:

WARNING in ./src/frontend/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load config "airbnb" to extend from.

Daniel Esteves

student•

¡Hola! Para el error que te muestra debes realizar estos pasos cualquier cosa me comentas :muscle:

Jorge Velasquez

student•

No entiendo porque tantos errores, el profe en el vídeo declara las cosas de una forma y en la pestaña de archivos y enlaces cargan unos archivos con otras configuraciones. :(

ENRIQUE NIETO MARTINEZ

student•

No me deja avanzar el siguiente error:

ERROR in ./src/frontend/index.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
C:\Users\ennima\Desktop\School\Platzi\serverRender\node_modules\eslint\lib\source-code\source-code.js:426
        return /s/u.test(text.replace(/\/\*.*?\*\//gus, ""));
                                      ^

SyntaxError: Invalid regular expression flags
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\ennima\Desktop\School\Platzi\serverRender\node_modules\eslint\lib\source-code\index.js:4:17)   
Child html-webpack-plugin for "index.html":

Maximo Martinez Soria

student•

Para que sirve todo esto que estamos haciendo?

Edwin García

student•

¿Por qué en el archivo .babelrc se usan esos paquetes y se instalan con nombres diferentes? Usualmente uno instala los paquetes con los mismos nombres y me dio dificultad porque no los encontré, pero instalé otros y funcionaron. Instalé

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

Manuel Ojeda

student•

Normalmente se instala el nombre con la terminación de plugin o class que va especifico hacia algo, por lo que solamente especificamos diciéndole a babel que es lo que hará compatible con los navegadores.

Alexis Alberto Texis Auza

student•

¿Porque al probar la configuracion integrando vendor file,cuando se realizan imports dinamicos surge un error de compilacion?

Carlos Sampol

Team Platzi•

Podrías compartirme tu configuración de Webpack por favor ?

Carlos Sampol

Team Platzi•

Para estos casos de suele usar react-loadable cómo estás haciendo el import dinámico ?

Santi Dalmasso

student•

Muy mal organizado el curso. Faltan explicaciones de las configuraciones. El profesor se la pasa escribiendo y escribiendo configuraciones y arreglando errores. Se entiende muy poco o casi nada.

Oscar Barajas Tavares

Team Platzi•

Este curso estamos organizándolo nuevamente para una nueva versión enfocado en resolver los problemas del curso.

rusbel bermúdez rivera

student•

en la vida real nos la pasamos corrigiendo detalles, es parte del show

Luis Lira

student•

Hay varios errores en el código del vídeo, les recomiendo ver el comentario de Andrés para que no los tengan: https://platzi.com/comentario/803224/

Didier Zúñiga

student•

Y en consola aparece este error:

Uncaught Error: Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read property 'forEach' of undefined
    at Linter.parseResults

Carlos Sampol

Team Platzi•

Comprueba que tengas instalado eslint-config-airbnb

Si no funciona compárteme porfa tu archivo de configuración de eslint

Didier Zúñiga

student•

Si, ya esta instalado.

Aquí esta el archivo: https://github.com/didierzuniga/videoplayer/blob/feature/router-redux/.eslintrc

rusbel bermúdez rivera

student•

¿Que es vendor.js o vendor file? aqui una lectura que nos da la explicación por Demain de platzi

https://platzi.com/blog/que-es-el-vendor-file/

Jesús Miguel Quinto Teran

student•

Es necesario una mejor organización para la clase anterior y esta clase.

Creo que la mayoría de los comentarios están un poco exagerados, tenemos que recordar que:

Todos (TODOS), inclusive los profesores de platzi se equivocan.
La detección y corrección de errores y un parte muy importante de estos cursos.
Los aportes de tus compañeros pueden ser de mucha utilidad, yo por ejemplo vi los errores y revise el sistema de comentarios y llegue sin errores a esta clase.

Saludos :)

Ingrid Sagrero

student•

tengo un error que no he logrado solucionar, ayuda pf!!! Les dejo la url del repo

ERROR in ./src/frontend/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-plugin-transform-class-properties' from 'D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo' at Function.module.exports [as sync] (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules\resolve\lib\sync.js: 71:15) at resolveStandardizedName (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\files\p lugins.js:101:31) at resolvePlugin (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\files\plugins.js: 54:10) at loadPlugin (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\files\plugins.js:62: 20) at createDescriptor (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\config-descrip tors.js:154:9) at items.map (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\config-descriptors.js :109:50) at Array.map (<anonymous>) at createDescriptors (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\config-descri ptors.js:109:29) at createPluginDescriptors (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\config- descriptors.js:105:10) at plugins (D:\msagrerom\Documents\otrosIngrid\server-side-rendering\PlatziVideo\node_modules@babel\core\lib\config\config-descriptors.js:4 0:19) Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = ./index.html [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 171 bytes {0} [built] i ｢wdm｣: Failed to compile.

Gabriel De Andrade

student•

Hola parece que babel-plugin-transform-class-properties no está instalado ¿Puedes intentar instalarlo nuevamente?

Ingrid Sagrero

student•

Instalé de nueva cuenta varios paquetes y resultó

Enmanuel castillo

student•

Creo que es mejor esperar la modificación del curso pues no he podido continuar con tantos errores

  optimization: {
    splitChunks: {
      chunks: 'async',
      name: true,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: 'assets/vendor.js',
          enforce: true,
          test(module, chunks) {
            const name = module.nameForCondition && module.nameForCondition();
            return chunks.some((chunk) => chunk.name !== 'vendor' && /[\\/]node_modules[\\/]/.test(name));
          },
        },
      },
    },
  },

ERROR in ./src/frontend/index.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
C:\Users\ennima\Desktop\School\Platzi\serverRender\node_modules\eslint\lib\source-code\source-code.js:426
        return /s/u.test(text.replace(/\/\*.*?\*\//gus, ""));
                                      ^

SyntaxError: Invalid regular expression flags
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\ennima\Desktop\School\Platzi\serverRender\node_modules\eslint\lib\source-code\index.js:4:17)   
Child html-webpack-plugin for "index.html":

Usando Plugins y vendor file en Webpack

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