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.