Webpack es una herramienta de procesamiento de assets (js, imágenes, css…) .Tras ejecutar webpack, deja preparados todos los assets de nuestro proyecto para poder enviarlos a producción. Podemos verlo como una mezcla entre gulp/grunt y require.js ya que además, maneja dependencias javascript.

Si en una webapp de toda la vida teníamos esto (si eras más o menos organizado):

<html>
  <head>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="vista.css">
    <link rel="stylesheet" href="otrocss.css">
    ...
  </head>
  <body>
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript" src="modulo.js"></script>
    <script type="text/javascript" src="vista.js"></script>
    ...
  </body>
</html>

con webpack tendremos:

<html>
  <head>
    <link rel="stylesheeet" href="/dist/bundle.css">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

Un único archivo css y un único archivo js (si así lo queremos) con todo el código necesario para nuestra aplicación, esto lleva implícito:

  • Compilado de css. Además de juntar nuestro código css en un único fichero, webpack puede compilar sass o less.
  • Traspilado y manejo de dependencias javascript. Ya no tenemos que hacer virguerías con el orden en el que importamos nuestros ficheros javascript en el dom, ahora gracias a webpack y un poco de magia ES6, podemos traer ficheros en el orden que queramos según nuestros módulos dependan de ellos.
  • Manejo de imágenes. Ya estén en el DOM, los requiera un archivo js o se importen desde un archivo css, webpack ‘encontrará’ tus imágenes, las procesará y dejará el path correcto dependiendo de tu configuración.
¿Ha acabado webpack con gulp / grunt? Para nada… gulp y grunt siguen siendo válidos, son mucho más flexibles que webpack y se pueden utilizar para automatizar  workflows de todo tipo, no sólo webapps.

Instala webpack y webpack.config.js

Para utilizar webpack en tu proyecto, es necesario instalarlo y (por comodidad) añadirlo a tu lista de scripts dentro del package.json

$ npm install webpack webpack-cli --save-dev
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
  },

Por defecto, webpack utilizará el webpack.config.js que esté en la raíz del documento, podemos utilizar otros ficheros, pero tendremos que definirlos al llamar a webpack. Un ejemplo sencillo de un webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    publicPath: 'dist/'
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.(png|jpg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}
  • entry Le dice a webpack qué archivo es el de entrada y por donde debe empezar compilando. La clave está en que sólo puedes poner archivos javascript como entries, así que si quieres que webpack procese también archivos css o imágenes, estos deben estar importados en un archivo js por el que pase webpack (y tener su loader correspondiente, ver module).
  • output Le dice a webpack dónde debe poner los archivos que genere.
  • module Además de javascript, puedes utilizar loaders para que webpack procese otro tipo de archivos (esto es parecido a los plugins de gulp o grunt), con la expresión regular test le dices a webpack el loader que corresponde a cada tipo de archivo.

Loaders

Como acabamos de ver, en el archivo de configuración podemos definir loaders para cada tipo de archivo. Un loader preprocesa cada extensión para que podamos añadirlo a nuestro proyecto (echa un vistazo a la lista de loaders de webpack). Para tareas más complejas, habrá que utilizar un plugin.

Por ejemplo, si queremos utilizar SASS en nuestro proyecto, instalamos los loader correspondientes y los añadimos a nuestro module la regla para archivos scss:

$ npm install style-loader css-loader sass-loader node-sass --save-dev
module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        'style-loader', 'css-loader', 'sass-loader'
      ]
    }
  ]
}

Webpack procesa de derecha a izquierda, por lo que cuando webpack encuentre un archivo scss, primero lo tratará sass-loader, después css-loader y finalmente style-loader (este loader pone el código css en el <head> de la página, para desarrollo o pruebas está ok, pero posiblemente lo quieras en un archivo a parte para producción).

Plugins

Los plugins son realmente quien tienen la carga de trabajo en un flujo de webpack. Los loader se quedan simplemente para tratar archivos, pero si quieres hacer algo más con esos archivos es cuando entra en juego un plugin (echa un vistazo a la lista de plugins de webpack).

Por ejemplo, si queremos comprimir nuestros js con uglify tendremos que utilizar un plugin: UglifyjsWebpackPlugin. Esto sirve a modo de ejemplo, ya que en webpack4 viene por defecto al utilizar el modo producción.

$ npm install uglifyjs-webpack-plugin --save-dev
module: {
  plugins: [
    new UglifyJsPlugin()
  ]
}

Instalado y añadido a nuestro listado de plugins, procesará los archivos js y los comprimirá.