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.

Saber si estamos en producción o desarrollo

Recuerda que podemos comprobar si la variable process.env.NODE_ENV está en production para saber que estamos en producción.

Yo te mostraré cómo hacerlo en el HTML o específicamente en el index.html, pero desde JS puedes acceder igualmente a esta variable.

Condicional en index.html con webpack

Te repito que en mi caso necesitaba incluir un script de publicidad solo en producción, es decir, al hacer el npm run build. Para ello hice un if así:

Y con eso fue más que suficiente, ya que ahora el script solo se incluirá en el HTML si estamos en producción. Por cierto, todo esto que te muestro es sintaxis de EJS.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: