Webpack, Desde Cero


¿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

Comentarios

  1. hola, quise agregar bootstrap y me carga bien pero para mi style personalizado me tira el siguiente error cuando compilo

    ERROR 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

    ResponderEliminar
    Respuestas
    1. Mis loader quedaron asi:

      module: {
      rules: [
      {
      test: /\.scss$/,
      use: [
      { loader: MiniCssExtractPlugin.loader},
      { loader: 'css-loader'},
      { loader: 'sass-loader'}
      ],
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
      }
      ]
      },

      Eliminar

Publicar un comentario