¿Qué es WebPack?
- es un Module Blunder, o en español un empaquetador de Módulos, que no es más que tomar todos los módulos que estés usando en tu aplicación y agruparlos en un solo paquete.
- puede tomar paquetes que sean tanto archivos customizados o modules de npm
- Genera Archivos Estáticos que puedes luego desplegar en tu Servidor
- Puede Ser Extendido con Plugins
¿Que es un Modulo?
- es un poco de código que provee una funcionalidad
- Abstracción
- Encapsulación
- Usualmente se encarga de una simple tarea o funcionalidad
- Reusable
¿Que hace diferente a WebPack?
- Code Splitting, o division de codigo, que te permite separar tu código y servirlo bajo demanda.
- Loaders, ya que solo soporta Js, el usa los loaders para poder usar otros archivos como sass, css, jsx, ect, y que te permite cargarlos dentro de javascript.
- Analisis Inteligente, que te permite unir
- Plugins
Ejemplo de Loaders:
- CSS
- Sass & less
- JSX(React)
- Babel
- CoffeScript
- TypeScript
- Ejs, Pug, Handlebars
- json
Se que todo esto puede ser algo tedioso de aprender, y es por eso que hecho un vídeo explicándolo. así que no olvides de decirme tus dudas y comentarios.
Código: Descargar desde Mi Github
Código: Descargar desde Mi Github
muy bueno, gracias por el video
ResponderBorrarhola, quise agregar bootstrap y me carga bien pero para mi style personalizado me tira el siguiente error cuando compilo
ResponderBorrarERROR in ./src/styles.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | /*variables*/ > @mixin font{
| font-family: 'Poppins', sans-serif;
| font-size: 14px;
@ ./src/app.js 3:0-23
Mis loader quedaron asi:
Borrarmodule: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader},
{ loader: 'css-loader'},
{ loader: 'sass-loader'}
],
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},