Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Con los conceptos básicos aprendidos en lecciones anteriores vamos a comenzar a trabajar con el proyecto del curso.
  • Como ves se trata de una pequeña aplicación desarrollada con Vue a través de la etiqueta script y aderezado con CSS GRID.
  • La mecánica es simple, cada vez que hago click en el botón se realiza una petición vía Ajax a un API que devuelve imágenes de gatos. No se puede pedir más.
  • Sobre esta base añadiremos toda la magia de Webpack para usar módulos JavaScript, Single File Components, SASS, Hot Module Reloading, caching, code splitting y demás.
  • Vamos a comenzar a gestionar los recursos con Webpack. Primero le toca a JavaScript.
  • Ahora ya sabes Instalar Webpack, así que vamos a hacerlo creando nuestro package.json.
    • npm init -y
    • npm install --save-dev webpack webpack-cli
  • Ahora añadimos nuestra tarea build y creamos nuestro archivo de configuración usando una función. También sabes cómo hacerlo.
    const path = require("path");
    module.exports = (env, argv) => {
      return {
        entry: "./src/js/main.js",
        output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, "dist")
        }
      };
    };
  • En este caso disponemos de un documento HTML index.html. Vamos a usar HTMLWebpackPlugin con las opciones title y template para indicarle que queremos usarlo como base. Antes podemos comentar la llamada a nuestro main.js a través de script ya que es Webpack quién se encarga ahora 🔥.
  • Instalamos HTMLWebpackPlugin como dependencia de desarrollo y lo requerimos.
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = (env, argv) => {
        ...
        plugins: [
          new HtmlWebpackPlugin({
            title: "Webpack desde cero",
            template: "./src/index.html"
          })
        ]
    };
  • Al ejecutar nuestra tarea y lanzar el resultado desde dist verás que funciona pero no tenemos CSS. En la siguiente lección veremos cómo gestionar nuestros estilos CSS con Webpack.
Descarga la chuleta de Vue 3 gratis

Descarga la chuleta de Vue 3

Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️

DESCARGA GRATIS LA CHULETA AHORA 💾

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue