Webpack convierte imagen a base64
En este post vamos a hablar sobre el trabajo en imágenes al usar webpack. A veces, webpack convertirá las imágenes a base64 y en otras ocasiones devolverá la ruta de la misma. Esto se puede configurar de acuerdo a tus necesidades, y justamente veremos cómo hacerlo configurando el url-loader.
Condicional con Webpack y HTML
Hoy voy a mostrarte cómo usar un if dentro de una plantilla HTML cuando utilizas Webpack, HtmlWebpack o html-webpack.
Concretamente yo estoy usando Webpack con la CLI de Vue y tuve la necesidad de incluir un script de JavaScript solo en el entorno de producción, cosa que fue muy sencilla de hacer con EJS y Webpack.
En este post te mostraré cómo hacer una condicional dependiendo de si estamos en producción o desarrollo dentro de HTML.
Variables del entorno con Vue.js y Vue CLI
Las variables del entorno en Vue.js sirven para saber el entorno en el que estamos (producción o desarrollo) y también para acceder a otros datos que cambian dependiendo del entorno.
Por ejemplo, en producción podemos tener una clave API o una URL de la API, mientras que en desarrollo esas variables pueden cambiar.
Es por ello que las variables del entorno o environment variables de la Vue CLI vienen para ayudarnos, ya que nos permiten definir variables propias y también a conocer el entorno en el que estamos.
Validar formularios en Vue con Vee Validate
Vee Validate es un plugin de Vue.js que sirve para validar formularios de una manera fácil pero poderosa.
Lo que destaca es:
- Su simplicidad, pues no se tiene que estudiar demasiado para comenzar a usarlo
- La flexibilidad que ofrece
- Soporte para otros idiomas (entre ellos el español)
- Mensajes de error predefinidos
- Simple sintaxis y validadores por defecto
- Reglas personalizadas
- Manejo del evento que desencadena la validación
En este artículo vamos a dar un repaso y explicación de VeeValidate con algunos ejemplos.
Al final tendremos un ejemplo completo que se puede ver aquí, que es como en la imagen:
Validación de formularios con Vue.js, VeeValidate y Bootstrap
Webpack: error en ruta de assets al compilar para producción
Introducción
Esta entrada es más que nada un recordatorio para mí mismo. Se trata de una configuración de webpack para compilar aplicaciones y solucionar un error en ruta de assets al compilar para producción.
Acceder a proyecto de webpack en un servidor a través de una LAN
Introducción
Cuando creamos algún proyecto utilizando webpack, el servidor comienza a escuchar en un puerto que podemos cambiar. Al ejecutarse luce así:
Pero si verificamos nuestra IP y accedemos desde otro dispositivo conectado a la misma red que nuestro servidor, no podremos acceder.
Hoy traigo la solución para que podamos acceder al servidor a través de una IP.
Acceder al servidor con su IP a través de una red local o lan
Hace falta mencionar que esto funciona correctamente con webpack. Buscamos el archivo package.json de nuestro proyecto, que luce así:
Fijémonos en donde dice scripts, y luego en donde dice dev. Ahí es en donde ejecutamos nuestro proyecto, y le pasamos argumentos.
Lo único que hay que hacer para que podamos acceder desde nuestra red es pasar el argumento host, seguido de la ip de nuestro servidor.
--host xxx.xxx.xxx.xxx
Con ello, podremos acceder desde otro dispositivo siempre y cuando estemos en la misma red.
La desventaja es que tenemos que cambiar la ip en nuestro package.json en caso de que cambie en nuestro servidor.