Iniciamos el proyecto con Webpack

• 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.