• https://youtu.be/GU-2T7k9NfI

webpack src/js/app.js dist/bundle.js es el comando básico, una vez añadido webpack, para generar un bundle.js. Webpack puede realizar otras tareas de optimización y minimización si añadimos que es para producción con -p.

Lo que hace es pillar a partir de los imports dentro del código js qué construir. Módulos y plugins que utiliza Webpack para CSS también requieren que incluyas ficheros .css en el código js.

Añadiendo webpack-dev-server como pacate al proyecto y substituyendo el comando de ejecución webpack por webpack-dev-server se nos añade un dev web server que nos permite hacer reload de los ficheros y demás. El comando sería: webpack-dev-server –entry ./src/js/apps.js —output ./dist/bundle.js.

Webpack necesita un entry point y un output. Usa modulos y plugins para transformar el contenido desde el entry al output.

Para escoger un fichero config (diferente al por defecto: webpack.config.js) se puede añadir –config al comando. Con un archivo por defecto no necesitamos añadir parámetros al comando de ejecución.

var path = require('path');

module.exports = {
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist'  // Para el webpack-dev-server, donde encontrar los ficheros
  }
}

Tras el output podemos añadir una sección de modules. Modules tiene un array de rules que es sobre qué elementos se aplica un módulo. Un módulo es un transformador del código y lo has de instalar previamente (npm install css-loader style-loader –save-dev).