Cómo ajustar la configuración inicial de Webpack
Después de haber repasado los principales conceptos de Webpack en los artículos ¿Qué es Webpack, cómo funciona y cómo instalarlo? y los Pasos prácticos antes de empezar a trabajar con Webpack, vamos a centrarnos en la configuración de esta herramienta para crear páginas web y, muy concretamente, en las diferentes propiedades que podemos editar en su archivo webpack.config.js. De este modo, podremos comenzar a utilizar esta poderosa herramienta de desarrollo que nos permite empaquetar y exportar en bundles todos los ficheros necesarios para que un proyecto funcione con todas sus dependencias frontend. Ten en cuenta iniciar tu proyecto con npm (comandos de terminal) antes de instalar Webpack.
npm init npm i -D webpack webpack-cli
Recuerda hacerlo en la raíz del proyecto.
Luego crearemos una carpeta donde irá el código fuente.
mkdir src cd src touch index.js
Scripts npm
Programamos un script, que situaremos en package.json, para llamar a Webpack.
'scripts': {
'build': 'webpack --mode production',
'builddev': 'webpack --mode development'
},
Y lo hacemos correr con:
npm run build
Al ejecutar el comando se añade la carpeta dist con los ficheros producidos por el empaquetador.
El fichero webpack.config.js
Es el archivo, con código JavaScript, donde se encuentra la configuración de Webpack, que podemos parametrizar según nuestras necesidades y que será procesado por NodeJS.
Aunque podemos situarlo en otra ruta, debería estar ubicado en el directorio raíz de nuestro proyecto y en la carpeta donde tenemos package.json.
Estructura esencial del archivo webpack.config.js
Como ejemplo de estructura básica os mostramos el siguiente código, código que podremos hacerlo más complejo cada vez que agreguemos más configuraciones al archivo.
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'public_html/js'),
},
}
En el ejemplo estamos configurando solo el directorio de salida de los paquetes producidos. Os explicamos un poco el código:
- Con path trabajamos con archivos y rutas.
- Con module.exports exportamos código Javascript y que podremos utilizarlo fuera del archivo / módulo.
- path.resolve() resuelve una secuencia de cadenas con “paths”. Junta todos los caminos y nos muestra el absoluto.
- __dirname corresponde en NodeJS al directorio que usamos donde estamos programando.
La ruta donde se colocan los paquetes se hace mediante la propiedad output del objeto que estamos exportando en el webpack.config.js. Webpack sitúa los paquetes en la carpeta public_html/js en vez de meterlos en dist.
Principales propiedades de configuración de Webpack
Con las Entry definimos dónde Webpack empieza a tratar el código de nuestra aplicación para formar los paquetes; mientras que Output filename sirve para indicar el nombre de archivo del paquete que va a producir.
A continuación, veremos una configuración con las propiedades entry y output.
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'public_html/js'),
filename: 'app.js'
},
entry: {
main: './fuentes/inicio.js'
}
}
Además de los ya mencionados entry y output para definir los puntos de entrada y salida, repasamos otras propiedades que podemos configurar en webpack.config.js y que nos resultarán útiles :
- Con mode indicaríamos el modo modo de trabajo (development o production)
- module nos permite indicarle a Webpack cómo debe tratar los loaders del proyecto.
- Y plugins define los plugins que tendrá nuestro proyecto. Deberemos instanciar los objetos de cada uno que vayamos a utilizar.
Con estas pequeñas modificaciones en el archivo de configuración, ya tendríamos Webpack preparado para comenzar a sacarle partido.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.