/ webpack

Configuración de Webpack primeros pasos

Primero instalamos webpack en nuestro proyecto.
Lo vamos a instalar de forma local. Doy por hecho que sabes manejarte con node y npm.

npm install webpack --save

En la misma carpeta creamos un archivo src/main.js
De momento como ejemplo fácil vamos a hacer un alert.

alert('hola que tal');

Vamos a proceder a ejecutar esto con webpack.
Nota: Si hemos instalado webpack localmente no tendremos webpack accesible desde el shell. Para ello puedes añadirlo a tu path, y sino utilizar el binario que instala node en local, que en nuestro caso está en node_modules/.bin/webpack.
Por lo tanto en la shell:

node_modules/.bin/webpack src/main.js dist/app.js

Vemos que te da un resultado satisfactorio, y nos crea el archivo dist/app.js que es el archivo empaquetado por webpack.
Para probar que funciona creamos un archivo index.html en la raíz del directorio y añadimos lo siguiente antes de cerrar el body:

<script src="./dist/app.js" charset="utf-8"></script>

Abrimos el archivo en el navegador y veremos nuestro alert.
El problema ahora es que cada vez que queramos modificar el main.js tendremos que volver a ejecutar la sentencia de webpack. Para ello webpack tiene la opción --watch:

node_modules/.bin/webpack src/main.js dist/app.js --watch

Con esto ahora podemos modificar el archivo main.js, y webpack va a vigilar este archivo, cada vez que lo modifiquemos y le demos a guardar el automaticamente crea el archivo empaquetado dist/app.js

Ahora ya que vamos trabajando con npm , podemos crear este script de ejecución en el package.json. Para eso creamos este archivo automaticamente:

npm init -y

Esto nos genera un package.json por defecto. Aquí en la sección de "scripts" ponemos lo siguiente:

"build": "webpack src/main.js dist/app.js",
"watch": "npm run build -- --watch"

Con esto ahora ya podemos ejecutar webpack mediante npm:

npm run build

ejecutará webpack, y :

npm run watch

estará observando cambios y ejecutando webpack.

Una cosa a tener en cuenta es que una vez pongamos esto en el package.json es que no hay que poner toda la ruta a webpack como antes, npm ya sabe que tiene que usar el ejecutable webpack que está en node_modules.

Y el -- --watch que aparece en la segunda linea vemos que tiene un -- extra. Ese -- es la manera de decirle al comando que tiene que aceptar el argumento --watch.