Webpack 4 | Setup II

Background.

En el post anterior armamos un setup básico con webpack y si bien, eso puede funcionar al principio, conforme nuestros proyectos crezcan y se vuelvan más complejos necesitaremos modificar el comportamiento de webpack.

Para ello webpack nos permite definir un archivo de configuración: webpack.config.js; Al correr, webpack verifica si existe dicho archivo, de ser así, lo importa y lee los valores que hayamos definido.

Con este archivo de configuración podemos especificar entre otras muchas otras cosas: el tipo de archivos a procesar, transformaciones a aplicar y cualquier otro proceso que necesitemos para generar nuestro bundle.

Bastante práctico no? Veamos como funciona...

Playground.

Retomando el proyecto original.

demo
|_dist
    |_index.html 
    |_main.js // bundle generado
|_ src
    |_components
        |_dom.js
    |_index.js
|_package.json

También pueden clonar el ejercicio aquí. Los cambios referentes a este post están en el branch setup-ii que por el momento, son los mas recientes así que el master branch también les puede funcionar.

Webpack.config.js.

Para empezar vamos a crear un archivo nuevo en la carpeta raíz de nuestro proyecto demo:

demo
|_dist
    ...
|_ src
   ...
    |_index.js
|_package.json
|_webpack.config.js

 

webpack.config.js no es mas que un modulo de JavaScript que exporta un objeto con la configuración que usará webpack para generar el bundle

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: './dist'
    },
    mode: 'none'
}

Las Propiedades.

entry. Punto de entrada; No es más que el archivo que webpack tomará como referencia para ir construyendo el árbol de dependencias. Por default el valor es './src/index.js'.

También es posible definir multiples archivos

output. Ubicación en donde se generará el bundle (path) y el nombre del mismo (filename). El valor por default es dist para el folder y main.js para el nombre.

mode. Modo de configuración. El valor por default es production pero acepta además development y none. 

Dependiendo del valor definido webpack aplica ciertas optimizaciones (minificación, decoración de nombres, etc. ). Por el momento usaremos none para que webpack no aplique ninguna optimización.

Corremos el script que definimos en la primera parte: 

npm run build 

Y debemos obtener algo similar a esto: 

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.output.path: The provided value "./dist" is not an absolute path! -> The output directory as **absolute path** (required).

Un error bastante común y es que la propiedad path dentro output debe ser una ruta absoluta y no relativa, como lo definimos previamente.

Para corregir el error usaremos el modulo path, nativo de nodejs, que contiene varias funciones para manipular rutas de directorios:

const path = require('path'); // CommonJS sintaxis
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    mode: 'none'
}

__dirname es una variable de entorno (disponible en todos los scripts de node) que devuelve la ruta absoluta del directorio en donde se encuentra el script en ejecución (webpack.config.js)

Volvemos a correr el comando build:

npm run build

Ahora sí debemos obtener  algo similar a esto:

En nuestro directorio veremos que ahora tenemos un archivo nuevo: bundle.js junto a main.js. Puesto que el directorio de salida (output) sigue siendo el mismo; De igual forma podríamos cambiar el archivo usado como entrada (entry).

demo
|_dist
    |_index.html

    |_main.js // viejo bundle generado

    |_bundle.js
|_ src
    |_components
        |_dom.js
    |_index.js
|_package.json

|_webpack.config.js

Listo ahora ya sabemos como crear un archivo de configuración básico, conforme avancemos iremos agregando nuevas opciones.

En el siguiente post aprenderemos a agregar algunos plugins y como estos nos pueden ayudar a automatizar ciertas tareas.

Saludos!

Extra

• Cambia el valor de mode para ver la diferencia en el bundle entre los diferentes modos (production/development/none).
• Es posible indicarle a webpack que importe un archivo diferente a webpack.config.js usando la bandera --config:
• webpack --config webpack.otro.config.js