| 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:

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.