Usar Webpack con Laravel Mix

La manera de usar webpack de manera sencilla sin tener muchos conocimientos es con laravel-mix, que es algo así como un wrapper sobre webpack que esconde mucho de su dificultad. Laravel Mix se puede usar sin necesidad de usar Laravel.

Instalación

Primero se crea un proyecto nuevo y se inicializar un archivo de configuración de npm.

mkdir my-project
cd my-project
npm init -y

Se instala laravel mix y se guadar en las dependencias de desarrollo.

npm install laravel-mix --save-dev

Por ultimo se copia el archivo de configuración que trae el paquete webpack en la raiz del proyecto (este archivo viene con muchos ejemplos comentados).

cp node_modules/laravel-mix/setup/webpack.mix.js ./

Puesta en marcha

Luego de instalar laravel-mix, este viene con un par de scripts que permiten ejecutar webpack desde la consola, para que funcionen se deben agregar al archivo package.json en la sección de scripts.

"scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }

Cuando se está desarrollando por ejemplo se puede usar el comando siguiente para que webpack se quede escuchando cada cambio que se hace en el código y compile todo cada vez.

npm run watch