Aprende Webpack desde cero

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.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue