Configurar CSS para administrar elementos visuales

Si alguno le sale un error como a mi, cuando corremos npm run build. Puede deberse a que en la clase configuramos webpack con:

<code>
new CopyWebpackPlugin([{
      from: './src/styles/styles.css',
      to: ''
    }])

Pero después de harto rato debugeando , revise en la documentación y falta poner en CopyWebpackPluguin() la propiedad patterns. El código para resolver el error puede ser.

<code>  
new CopyWebpackPluguin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
    })

Ojalá a alguno le ayude, para que no este mucho tiempo intentando de que le funcione!!!

Si alguien tiene un problema al correr npm build, prueben con esto en webpack.config

new CopyWebpackPlugin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
    })```

Agregue modo oscuro
Mejore el diseño responsive
https://erickrg96.github.io/rick-and-morty-spa/

Si tienen problemas al correr npm run build, cambien la configuración de CopyWebpackPlugin por este:

new CopyWebpackPlugin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
})

Si a alguien le sale el síguete error:

TypeError: compilation.getCache is not a function

La solución es:

1. npm uninstall copy-webpack-plugin
2. npm install [email protected]

Esto por que el curso se encuentra desactualizados para las versiones nuevas.

Bravaso! Que bacán esto de trabajar con APIs! Sólo les comparto un detalle en la config de copy-webpack-plugin, debería ser escrito así:

Mi reto para aprender bien todo será hacer algo similar pero con la API de pokemon, haber si entendí bien, manejar otra API distinta y agregarle estilos distintos.

Así quedo

y en móvil

Esto me funcionó para el error del build:

newCopyWebpackPlugin({
      patterns: [{ from: './src/styles/styles.css',
      to: '' }],
    })

Algunos ajutes al responsive!

@media (max-width: 780px) {
	.characters {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.characters {
		grid-template-columns: 1fr;
	}

	.characters-inner {
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-row-gap: 0;
	}
}

Para los que no les funcione: NPM RUN BUILD, a mi me funciono cambiando el campo de require asi:

const CopyWebpackPlugin = require('copy-webpack-plugin');

Ingrese a la documentación oficial y pude solucionar el problema: 😀
https://github.com/webpack-contrib/copy-webpack-plugin

Esta solución la dio el compañero Cristian Perez Dejoy, el detalle está en instalar la misma versión de copy-webpack-plugin que tiene el profe Óscar. Esta es la solución más rápida y sin realizar tantos cambios. Sin embargo, como ya han mencionado otros compañeros lo mejor es analizar bien el proyecto y hacerlo trabajar con las ultimas versiones. Espero que sea de ayuda.

Solucione el error instalando la versión que se utiliza en el curso.

• npm install copy-webpack-plugin@5 --save-dev

• En el archivo webpack.conig.js

**Nota: **desinstala copy-webpack-plugin

Me esta generando este error, no encuentro que puede ser, si a alguien le paso, le agradecería me diera una mano!

Algunos estilos adaptados de YouTube 😉

Esto resuelve el problema con el

npm run build 
npm run start

luego de que instalan el copy-webpack-plugin:

En el archivo webpack.config.jshay que colocar:

 new CopyWebpackPlugin(
      { 
        patterns: [{ from: "./src/styles/styles.css", to: "" }],
      }
    )

Esto por la actualización a la versión principal 6.x se produjo un cambio importante: en lugar de simplemente pasar la matriz con los patrones de configuración directamente al CopyWebpackPluginconstructor, ahora debe envolverla en la patterns propiedad de un objeto y pasarla.

La info la conseguí aquí

Lo hice de otra forma implementado lo que aprendi en el curso de webpack
Utilizando este plugin para incluir CSS en el proyecto

Instalamos las siguientes dependencias:

 npm install mini-css-extract-plugin css-loader -D

Configuramos el arichivo webpack.config.js

Llamamos el plugin con una constante, agregamos una nueva regla para incluir archivos .CSS y creamos una nueva instancia del plugin en la sección de Plugins.

Hola, les comparto una forma alternativa CopyWebpackPlugin y poder importar nuestros estilos al javascript en vez de al html, y se vea de esta forma

index.js

import router from './routes/index'
import './styles/styles.css' //Esto es lo que queremos lograr
window.addEventListener('load', router)

window.addEventListener('hashchange', router)

lo primero que ocupamos hacer es, en vez de instalar copy webpack plugin instalar MiniCssExtractPlugin y css loader. Este es el comando para instalarlos:

 npm i mini-css-extract-plugin css-loader -D  

teniendo eso, en el archivo de webpack.config.js importaremos el plugin asi:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

despues agregaremos una nueva regla

      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },

y agregaremos a la parte de plugins esto:

  new MiniCssExtractPlugin({ filename: 'assets/[name].css' })

el archivo final de webpack.config.js quedo asi

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
/** @type {import('webpack').Configuration} */
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },

  resolve: {
    extensions: ['.js'],
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({ filename: 'assets/[name].css' }),
  ],
}

y listo, ya podemos importar nuestros estilos desde el javascript
Todo esto lo aprende en el curso de webpack

al hacer el npm run build me copila sin problemas sin embargo la página me carga de esta forma no se porque, copié tal cual el archivo de la clase con sus estilos

Investigando un poco los comentarios de mas abajo, la solucion que me funciono con el error al hacer build fue:

new CopyWebpackPlugin({
            patterns: [{ from: "./src/styles/styles.css", 
            to: "" }],
        }),

ESTOS SON LOS ESTILOS DEL CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #3c484e;
  font-family: 'Open Sans', sans-serif;
}

.Header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Header a {
  text-decoration: none;
  color: #15302C;
}

.Main {
  padding: 10px;
  grid-template-columns: minmax(auto, 976px);
  display: grid;
  justify-content: center;
}

.Characters {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
}

.Characters-inner {
  grid-template-columns: 1fr 2fr;
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
}

.Characters-card {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: block;
  animation-duration: 2s;
  animation-name: fade;
}

.Characters-card img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-card h2 {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.Characters-card h3 {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  margin: 20px;
}

.Characters-item {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: block;
  animation-duration: 2s;
  animation-name: fade;
}

.Characters-item img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-item h2 {
  font-size: 18px;
  font-weight: 300;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.Characters-item a {
  text-decoration: none;
  color: #026C86;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Main-loading {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Documentacion de copy-webpack-plugin
https://github.com/webpack-contrib/copy-webpack-plugin

Para los que tengan problemas con copy-webpack-plugin, instalen la siguiente versión: npm install --save-dev [email protected]

Versión Movil:
Ajustado con @media(max-widht: 600px)

Version Escritorio:

Hola, les comparto los estilos rápidos que hice para este proyecto

Hola compañeros

Chic@s a esta altura del curso me reafirmo en lo que pense al inicio al configurar la nueva version de webpack ( en mi caso webpack 5.38.1 ) quizas este curso sea actualizado pronto (espero), en que no tiene sentido desinstalar la version actual y usar una version antigua (incluso deprecada) de varias dependencias durante todo el curso, que si bien al hacerlo ya no nos causara algun error, pero no tiene mucho sentido hacer eso, es contraintuitivo usar algo antiguo e incluso deprecado…asi que lo que les recomiendo es buscar la documentacion de la dependencia actual y guiarse de eso para completar el curso, en el siguiente link aparece la nueva estructura que debe tener el copy-webpack-plugin para que funcione:
https://www.npmjs.com/package/copy-webpack-plugin

En el CSS existe el estilo para la clase “Characters-inner”, pero en el archivo “Home.js” esta la clase “Character-item” la pueden corregir para que los estilos sean acorde a los descargados.

Lei un poco en la doc de webpack y probe con este codigo en el plugin, espero les sirva.

  plugins: [
    new HtmlWebpackPlugin(
      {
        inject: true,
        template: './public/index.html',
        filename: './index.html',
      }
    ),
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/styles/styles.css', to: ''},
      ],
    }),
  ],
};

Mi resultado pero usando el api publica de estadisticas del COVID:

Cuando les aparezcan errores, generalmente es por incompatibilidad entre las versiones de los paquetes de webpack. Lo que pueden hacer es poner:

npm list webpack

Con esto ven las versiones compatibles. Luego instalan las que necesitan.
Alternativamente, pueden leer la documentación.

Saludos a todos/as.

Solo como comentario companeros. Cuando trate de hacer el “build” me genero un error:

ERROR in   Error: html-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config:
  |
  |    minify: false

Agrege la confuguracion que me pedia dentro de los plugins en el archivo de webpack y me logro hacer el build

Por si a alguien le aparece el error

TypeError: compilation.getCache is not a function

Prueben desinstalando el plugin actual de copy-webpack-plugin e instalen una version anterior:

npm uninstall copy-webpack-plugin
npm install copy-webpack-plugin@6.2.1

Compilando el codigo me sale este error en la terminal:

TypeError: compilation.getCache is not a function```

Mi codigo es este:

const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘main.js’
},
resolve: {
extensions: [’.js’],
},
module: {
rules: [
{
test: /.js?$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
}
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
inject: true,
template: ‘./public/index.html’,
filename: ‘./index.html’
}
),
new CopyWebpackPlugin({
patterns: [
{from: ‘./src/styles/index.css’, to: ‘’},
{from: ‘./src/styles/mobile.css’, to: ‘’}
]
}),
]
}```

Con algunos ajustes en el estilo:
https://github.com/RLCHuncp/SPA—RickAndMorty

copy-webpack-plugin

npm i copy-webpack-plugin --save-dev 

Ok ya meta casi está cumplida. Mejoraré el css.

Les comparto mi pagina, le he agregado la interracion por las diferentes paginas que existen en el API y le he agregado el modo dark. espero les guste.

https://jesuslgarciah.github.io/cientifico/

todo iba muy bien … hasta que … este es el log que me generó al hacer el npm run build, alguna idea de cómo corregirlo?:

Me mando este error al correr el comando npm install copy-webpack-plugin

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! dev webpack@“4.41.2” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.1.0" from [email protected]
npm ERR! node_modules/copy-webpack-plugin
npm ERR! copy-webpack-plugin@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /root/.npm/_logs/2023-05-29T21_56_04_490Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-05-29T21_56_04_490Z-debug-0.log

¿qué procede? Ok, voy a reinstalar webpack y volver a correr el mismo comando, por lo que entiendo son las versiones del webpack

Si alguien le sirve, hice el CSS lo más responsive que pude :3

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #3c484e;
  font-family: 'Open Sans', sans-serif;
}

.Header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  text-decoration: none;
  color: #15302C;
}

.about {
  display: block;
  margin-bottom: 20px;
  font-size: 18px;
  margin-left: 8px;
}

.Main {
  padding: 10px;
  grid-template-columns: minmax(auto, 976px);
  display: grid;
  justify-content: center;
}

.Characters {
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
  place-content: center;
  place-items: center;
}

@media screen and (max-width:1009px) {
  .Characters {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width:655px) {
  .Characters {
    grid-template-columns: repeat(1, 1fr);
  }
}

.Characters-inner {
  grid-gap: 1.5rem;
  grid-row-gap: 1.5em;
  display: grid;
  place-content: center;
}

@media screen and (min-width:600px) {
  .Characters-inner {
    grid-template-columns: 1fr 2fr;
  }
}

.Characters-card {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: block;
  animation-duration: 2s;
  animation-name: fade;
}

.Characters-card img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-card h2 {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.Characters-card h3 {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  margin: 20px;
}

.Characters-item {
  text-decoration: none;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  border-radius: 5px;
  margin: 0 0 20px 0;
  display: flex;
  animation-duration: 2s;
  animation-name: fade;
  max-width: 305px;

}

.Characters-item img {
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0;
}

.Characters-item h2 {
  font-size: 18px;
  font-weight: 300;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.Characters-item a {
  text-decoration: none;
  color: #026C86;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.Main-loading {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Si tienen problemas al correr el npm run build modifiquen la versión del html-webpack-plugin en el package.json a la v 5.3.2 como esta en la siguiente documentación https://stackoverflow.com/questions/68302157/i-upgraded-my-webpack-v4-to-v5-and-after-that-i-am-getting-a-cannot-add-propert

me funciono asi:

new CopyWebpackPlugin({
patterns: [
{
from: “./src/styles/styles.css”,
to: “”,
},
],
}),

Cambie el color de fondo y ubique algunos elementos distintos .

Apartado de características del personaje

Le cambié el color de fondo
![](

Listo 😃

uno de los mejores profes

No se ustedes pero el profe (ni yo, la primera vez que hice este curso) nos dimos cuenta que los estilos no estaban siendo aplicado a los Characters-item ni a sus elementos internos, ya que el profe tuvo un typo que no fue corregido a lo largo de todo el curso, no entendía por qué no eran aplicados los cambios de varios selectores y al final fue por eso:
Era Characters-item y no Character-item

En el css si adicionan esto pueden hacer que la animación del elemento de nombre loading esté posicionado al medio de Characters-item, el elemento loading solo aparece instantes antes de que llamemos al router y nos devuelva los datos así que solo se puede apreciar en conexiones muy lentas o si hubo algún problema en red

#content {
  position: relative;
  height: 100vh;
}
.Main .loading {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  animation: spin 1.75s linear infinite;
}

si cada vez que tiene que configurar algo en webpack y les sale algun error se debe a las nuevas versiones de webpack las cuales se ven el curso de webpack que acabo de salir y donde se trabaja con html, css, sass y stylus ahi aprenderas como configurarlo correctamente

Si aun sigues sin poder usar copy-webpack-plugin, sigue los siguientes pasos.

Instala los siguientes plugins

npm install --save-dev css-loader

npm install --save-dev style-loader

Agrega esta configuración a tu webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Elimina las lineas que se indican sobre copy-webpack-plugin

Ahora vuelve a correr: npm run build y posteriormente npm run start
Fuentes:

• css-loader

• style-loader

Yo usé las dependencias: mini-css-extract-plugin, css-loader, style-loader y file-loader ¿Por qué? porque de esta manera yo evito “tocar” mi plantilla HTML al linkear mi hoja de estilo manualmente, así… con los loader, webpack tiene el control de cada una de las hojas de estilos que se vayan a utilizar y también insertarlo en mi plantilla html, ya sea en dev o production mode.
Para eso, tuve en cuenta lo siguiente.
Primero: requerir en el archivo webpack.config.js el módulo mini-css-extrat-plugin y luego definir las reglas.
![](

![](

Segundo: en Plugins, por medio de un objeto de la dependencia mini-css-extrat.plugin, indicarle por medio de la opción filename determinar el nombre y ruta de cada archivo css output en modo dev o build.
![](

Tercero:* Ahora bien, como el archivo css principal importa una URL de fonts.google.api, también hay que indicarle a webpack que lo gestione, para eso es la dependencia file-loader y también hay que definir una regla, así.
![](

.
Cuarto: en el archivo index.js importar la hoja de estilo.
![](

para los que les sale el error de

TypeError : compilation.getCache is not a function

yo lo solucioné con esto

npm uninstall copy-webpack-plugin  

//desinstalan la versión del copy webpack que tienen

npm install copy-webpack-plugin@6.2.1  

//instalan esta versión de copyWebpack

No me jaló con CopyWebpackPlugin

Usé y para poder insertar los estilos a mi proyecto.

aquí les dejo la instalación del plugin con la versión del profesor

npm i -D -E copy-webpack-plugin@5.1.1   

:root{
    --text-color-default: rgb(22, 22, 22);
    --text-info-color: rgb(29, 66, 26);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: monospace;
}
/*---Header---*/
.Header-main {
    display: flex;
    padding:10px 0;
    border-bottom: black solid 1px;
    margin-bottom: 0%;
}
.Header-logo{
    margin-left:3%;
}
.Header-logo a{
    text-decoration: none;
    color: var(--text-color-default);
    font-size: 2.8rem;
    transition: 1s;
}
.Header-nav{
    margin-left: auto;
    margin-right: 2%;
    font-size: 2.8rem;
}
.Header-nav a{
    text-decoration: none;
    color: var(--text-color-default);
    transition: 1s;
}
.Header-main a:hover{
    font-size: 3.2rem;
}
/*--Home--*/
.Characters{
    display: grid;
    justify-items: center;
    grid-gap: 70px 0;
    margin-top: 3%;
    grid-template-columns: repeat(3 , 1fr);
}
.Characters img{
    width: 80%;
    height: auto;
    border-radius: 2rem;
    display: block;
    margin: 0 auto;
    transition: 1s;
}
.Characters h2{
    font-size: 2.5rem;
    text-align: center;
    color: var(--text-color-default);
    margin: 5% 0;
}
.Characters a{
    text-decoration: none;
}
/*--characters--*/
.Characters-inner{
    display: flex;
    margin: 0 auto;
    width: 90%;
    margin: 3%;
}
.Characters-card img , .Characters-card h2{
    border-radius: 2rem;
    font-size: 2.5rem;
    text-align: center;
    padding: 10px 0;
}
.Characters-card h3{
    font-size: 1.8rem;
    font-weight: 0;
    margin: 10px 30px;
    color: var(--text-info-color);
}
/*--Error404--*/
.Error404{
    min-height: 700px;
    margin: auto;
    background-image: url('https://www.cinco8.com/wp-content/uploads/2020/08/404.png');
    background-repeat: no-repeat;
    background-size: cover;
}

Así quedo el mío, un poquito mas de detalles

**Me salio el error: compilation.getLogger is not a function **, tuve que actualizar webpack a 5.2.0 , webpack-cli a 4.1.0 y poner new CopyWebpackPlugin({ patterns: [{ from: './src/styles/styles.css', to: '' }], })

Alguna idea de cómo compilar archivos .scss con webpack? yo normalmente lo hago con gulp, pero no sé como hacerlo con webpack. Gracias!

puedes usar el flag -D en npm para guardar como dependenciad e desarrollo “npm install copy-webpak-plugin -D”

copy-webpack-plugin

En efecto, gracias compañeros, si es necesario realizar el ajuste del copywebpack

Perfecto

genial

Así me quedó

se me generaron 3 vulnerabilidades y son estas, que pueda hacer ahí?

Hasta ahora todo bien, buen ojo con los errores para completar cualquier caracter que falte! (Y)

Añadido estilos propios 😉

![](

Pasa pausar cualquier operacion en la consola “con windows: control + c”

Documentación del plugin

Reto:

Muchas Gracias profesor y a Mauros quinteros quien dejo una forma de compilar los estilos que me funcionó todo me estaba funcionando pero, al momento de ejecutarlo en el navegador no me la mostraba con estilos. 😄

Para evitar todo tipo de problemas con versiones, utilicen la misma que está utilizando Oscar.

Eliminen node_modules folder, reemplacen la sección de devDependencies y ejecuten el npm install. Si tienen tiempo, háganlo funcionar con las versiones más nuevas.

“devDependencies”: {
"@babel/core": “^7.7.5”,
“babel-loader”: “^8.0.6”,
“copy-webpack-plugin”: “^5.1.1”,
“html-webpack-plugin”: “^3.2.0”,
“webpack”: “^4.41.2”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.9.0”
}```

Complemento para estilos

npm install copy-webpack-plugin --save-dev```

webpack.config.js

const path = require('path'); //Nos permite acceder a donde estámos en las carpetas. Ya sea en local o en la nube.
const HtmlWebpackPlugin = require('html-webpack-plugin'); //Archivo necesario para trabajar con HTML.
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = { //Aquí se encuentra toda la configuración de lo que va a suceder. Modulo para exportar.
    entry: './src/index.js', //Punto de entrada con su dirección.Aquí vive el código inicial y de aquí parte al desarrollo.
    output: { //Donde se envía el proyecto estructurado y compilado listo para producción.
        path: path.resolve(__dirname, 'dist'), //Creamos el lugar dónde se exportará el proyecto.
        filename: 'main.js' //Este es el nombre del archivo final para producción.
    },
    resolve: {
        extensions: ['.js'], //Extensiones que vamos a utilizar.
    },
    module: { //Se crea un modulo con las reglas necesarias que vamos a utilizar.
        rules: [ //Reglas
            { // Estructura de Babel
                test: /\.js?$/, //Nos permite identificar los archivos según se encuentran en nuestro entorno.
                exclude: /node_modules/, //Excluimos la carpeta de node modules
                use: {
                    loader: 'babel-loader', //Utilizar un loader como configuración establecida.
                }
            }
        ]
    },
    plugins: [ //Establecemos los plugins que vamos a utilizar
        new HtmlWebpackPlugin( //Permite trabajar con los archivos HTML
            {
                inject: true, //Cómo vamos a inyectar un valor a un archivo HTML.
                template: './public/index.html', //Dirección donde se encuentra el template principal
                filename: './index.html' //El nombre que tendrá el archivo

            }
        ),
        new CopyWebpackPlugin({
            patterns: [{
                from: './src/styles/styles.css',
                to: ''
            }],
        })
    ]
}```

Aquí esta el reto:

Tuve un error decia que no encontraba webpack-cli, lo solucione

npm i -g webpack-cli

Este código me funciono:

plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: "./public/index.html",
      filename: "./index.html",
    }),
    new CopyWebpackPlugin({
      patterns: [{ from: "./src/styles/styles.css", 
      to: "" }],
    }),
  ],

Genial, Gracias a los aportes de los compañero logre generar el archivo .css 💪💪

Si alguno le sigue fallando a pesar de aplicar la solución que dio Diego Bustos Hehdy, el compañero que comentó antes de este comentario que yo hago, es porque adicionalmente hay que instalar un paquete mas de copy-webpack-plugin en el proyecto, que no esta en el curso ni en los archivos del curso, el paquete se llama @types/copy-webpack-plugin lo debes instalar con npm install @types/copy-webpack-plugin --save-dev y listo ya debería funcionar.

Si tienes un error, lee la consola, para eso se creo el comando de “build” a mi me arrojaba este, y me muestra el error.

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:

new CopyWebpackPlugin({
    patterns: [{
        from: './src/styles/styles.css',
       to: ''
    }],
})	

Utilizando Bulma

Buen video, pero como dicen antiguos companieros atentos a poner ‘Patterns:’

Otra opción que tenemos y además podemos agregar optimización es usar el MiniCssExtracPlugin Que aprendimos a usar en el curso de Webpack 😁

Es importante para que les funcione correctamente , comparen el archivo que tiene el profe (package.js) , este archivo debe ser igual al de ustedes (en la parte de las dependencias).Si tiene alguna diferencia lo mejor que pueden hacer es borrar la carpeta node_modules y volver a instalar las dependencias con las versión que tiene el profesor (las versiones están en el archivo package.js)

como puedo hacer para que la compilacion con webpack sea mucho mas rapida? haciendo un cambio me demora aproximadamente 5 segundos en compilar

Muy complicado, lo hice todo sin webpack

personalmente el curso de frontend developer no es el mejor si llegas desde 0 con html y css. Para mi los mejores para tener claro el tema son:

• el curso definitivo de HTML y CSS

• el curso practico de HTML y CSS

con el resto de cursos referentes al tema se puede reforzar lo aprendido en los dos anteriores

Otro plugin que te puede servir para el css es:

npm i mini-css-extract-plugin -D

Configuracion:

new MiniCssExtractPlugin({
   filename: 'assets/[name].css'
})

rule

{
     test: /\.(s*)css$/,	
     use: [
          {
               loader: MiniCssExtractPlugin.loader
           },
           'css-loader',
           'sass-loader',
                    
        ]
     }

en mi caso uso sass y queda de la siguiente forma

Si aparece algun error con get.CAche usar esto

npm uninstall copy-webpack-plugin
npm install copy-webpack-plugin@6.2.1```

Si tienen algún problema en el compilado, intenten trabajar con la versión del copy-webpack-plugin que se usa en el curso. corran:

npm i -D -E copy-webpack-plugin@5.1.1

Y copien tal cual la configuración como la hace el profesor, ya que al parecer en esa versión todavía se utilizaba como convención los brackets para los esquemas.

A mí me funcionó así:
1. Instalando CopyWebpackPlugin actualizado Diciembre 2020

$ npm install copy-webpack-plugin --save-dev --save

2. Luego agregan el plugin en el archivo webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");
////
////
////
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./src/styles/styles.css", to: " " },
      ],
    }),
  ],
};

La ruta tiene que estar como han nombrado sus carpetas.
Siempre revisen la documentación porque se actualiza. Buscan el plugin en Google, en este caso CopyWebpackPlugin y les saldrá los pasos.

No he podido agregar una imagen de fondo, alguien me puede explicar cómo se agregan? Intenté agregando file-loader pero tampoco funciona

Ya he probado con todos los consejos que dan pero sigue sin funcionarme, alguien me podría ayudar?

Copiar los estilos al compilado que estamos generando
npm install copy-webpack-plugin --save-dev

error en css es decir en orden se soluciona poniendo ruta exacta en href en el html
<link type=“text/css” rel=“stylesheet” href="…/src/styles/styles.css"

espero que les ayude

npm install copy-webpack-plugin --save-dev