Comparación Webpack-Gulp

Luis Montero
Sep 2, 2018 · 2 min read

Para este artículo, analizaremos los conceptos principales de Webpack y compararlos con Gulp.

Herramientas

Gulp: Es una herramienta que nos permite automatizar tareas repetitivas, por ejemplo; Recargar el navegador, minificar archivos, entre otras.

Webpack: Es un empaquetador de módulos para aplicaciones con javascript, cuando Webpack procesa nuestra aplicación mapea cada módulo del proyecto y genera los archivos finales(bundle) para ser utilizados en el navegador, por ejemplo: html, css y JS.

Conceptos principales de Webpack

Entry points

Acá es donde se cargan los archivos de entrada, los leerá Webpack para generar un bundle, se puede tener un entry point por cada página que se quiera utilizar.

La principal ventaja contra gulp, son los múltiples entry points, por ejemplo, si utilizáramos browserify con gulp, esta tarea en sí se complicaría un poco, ya que browserify solo permite un entry point, entonces tendríamos que buscar un workaround para hacer esto.

Ejemplo Workaround con Gulp

Fuente: https://fettblog.eu/gulp-browserify-multiple-bundles/

Explicación: envían dos entry points, el workaround utilizado es recorrer esos entry points con un map.

gulp.task('default', function() {
// we define our input files, which we want to have
// bundled:
var files = [
'./app/main-a.js',
'./app/main-b.js'
];
// map them to our stream function
var tasks = files.map(function(entry) {
return browserify({ entries: [entry] })
.bundle()
.pipe(source(entry))
// rename them to have "bundle as postfix"
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dest('./dist'));
});
// create a merged stream
return es.merge.apply(null, tasks);
});
//Fuente del https://fettblog.eu/gulp-browserify-multiple-bundles/

En Webpack, los entry points son nativos, y se hacen de manera muy sencilla.

//webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};

Output

Son los puntos de salida, le dicen a Webpack donde generar el bundle de acá entry point recibido.

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

Loaders

Por defecto Webpack solo entiende Javascript, los loaders nos permiten cargar otro tipo de archivos para que puedan ser consumidos por la aplicación. Por ejemplo cargar imágenes.

En Gulp lo que haríamos sería utilizar tareas para copiar esos archivos en el build.

Plugins

Nos da la capacidad de extender características de Webpack, por ejemplo para el performance, como comprimir archivos.

En Gulp es similar, lo que haríamos es cargar librerías y luego agregarlas a nuestras tareas.

En el siguiente artículo, crearemos nuestro primer setup utilizando webpack.

Fuentes de información

https://platzi.com/cursos/webpack

Luis Montero

Written by

Web Developer - in process of improving

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade