Iniciamos el proyecto con Webpack
Introducción
Conceptos esenciales
Uso práctico
- 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 opcionestitle
ytemplate
para indicarle que queremos usarlo como base. Antes podemos comentar la llamada a nuestromain.js
a través descript
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.
Código inicial
¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?
Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.