Comparación Webpack-Gulp
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
