Cómo utilizar Webpack en páginas web tradicionales

4min

Hacía ya un tiempo que no escribíamos sobre  Webpack, una utilísima herramienta para desarrolladores que permite empaquetar y exportar todos los ficheros necesarios para que un proyecto funcione con todas sus dependencias frontend, por lo que resulta muy práctico de cara a las aplicaciones SPA. Hoy vamos más allá y nos planteamos: ¿cómo podemos utilizarlo si trabajamos con tecnologías backend como Apache? Te lo explicamos en este artículo.

Al crear una web, dependiendo de la tecnología que usemos en el frontend, es posible que tengamos que transformar el código del framework o de las librerías y puede que no nos deje ejecutar directamente el código del frontend en el navegador sin antes pasar por Webpack. Si empleamos lenguajes de servidor como PHP, .NET, Python, etc., seguramente, antes de enviar el código HTML al cliente tengamos que usar Apache o IIS para que los procese. Es por esa razón por la que no podemos valernos solo del servidor de desarrollo de Webpack para explotar todas sus ventajas de su flujo de trabajo.

Si combinamos el desarrollo del frontend y el lenguaje que elijamos en el backend, tendremos la solución perfecta que podemos poner en marcha en unos pocos pasos.

Índice

Instalación de webpack-dev-server

Deberemos de instalar primeramente el paquete de Node webpack-dev-server. El servidor de Webpack se encargará de servir los bundles de tu aplicación, y el Apache o IIS de distribuir el código HTML.

npm install -D webpack-dev-server

Con un script npm pondremos a punto el servidor de desarrollo.

'scripts': {
     'start': 'webpack-dev-server --mode development'
 }

Configuramos la ruta de los bundles

Vamos a fijar la configuración para webpack.config.js, donde pondremos la ruta y un puerto donde estará ubicado el código generado por Webpack.

module.exports = {
   devServer: {
     port: 9999
   },
   output: {
     publicPath: 'https://localhost:9999/bundles/'
   },
   devtool: 'inline-source-map'
 }

Destacamos algunas cosas :

  • Hemos puesto el puerto del servidor en el 9999, aunque podrás utilizar el que creas conveniente. A ser posible, que esté libre.
  • En output es donde estarán públicos tus bundles.
  • devtool: ‘inline-source-map’ nos ofrece las bondades de los sourcemaps.

Acoplamos los scripts del bundle en desarrollo

En el backend vamos a poner la ruta donde está ubicada el bundle del servidor de desarrollo de Webpack:

<script src='https://localhost:9999/bundles/main.js'></script>

En la configuración Output hemos utilizado una ruta idéntica a la del publicPath. Seguida del bundle JavaScript que tiene su nombre predeterminado, main.js.

Acoplamos los scripts del bundle en producción

Lo visto anteriormente nos sitúa en un servidor de desarrollo. Ahora lo que deberemos hacer para la producción es ubicar las rutas de los bundles que hemos creado. Esto lo conseguimos con la etiqueta SCRIPT, en la que se indica la URL dentro del directorio de publicación del servidor web de este modo:

<script src='js/main.js'></script>

Variables de entorno para mostrar una u otra etiqueta SCRIPT

Estar conmutando la etiqueta SCRIPT no facilita que haya un desarrollo fluido. Para ello, lo ideal es crear un sistema de variables de entorno.

En el siguiente código tenemos una variable que nos indica si estamos en desarrollo o en producción, facilitándonos mucho la tarea:

<?php
 if($estoyEnProduccion) {
   echo '<script src='js/main.js'></script>';
 } else {
   echo '<script src='https://localhost:9999/bundles/main.js'></script>';
 }
 ?>

En otro lenguaje de programación, como ASP.NET, Python, etc., el código será distinto, pero el efecto debería de ser exactamente el mismo.

Si estás empezando a trabajar con Webpack, te recomendamos consultar los artículos ¿Qué es Webpack, cómo funciona y cómo instalarlo?, Pasos prácticos antes de empezar a trabajar con Webpack y Cómo ajustar la configuración inicial de Webpack.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: