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.

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í:

<% if (process.env.NODE_ENV==="production" ){ %>
<script data-ad-client="ca-pub-4859317680104877" async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<% } %>

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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