Loaders vs. plugins en Webpack: ¿cuál es la diferencia?

49090Puntos

hace 3 años

Comparte en:

Si no conoces a Webpack, te lo presento, webpack es un empaquetador de módulos el cual solo puede entender archivos con extensión .jsy .json, es una herramienta que, como Frontend, debes conocer, ya que es de gran ayuda para toda aplicación web y es el compañero perfecto cuando quieres empezar proyectos con diferentes frameworks, como React desde 0.

Un momento… ¿React? ¿No se supone que React utiliza archivos jsx para sus componentes? Así es, es aquí donde entran los loaders y plugins, pero cada uno juega un rol importante y diferente en tu bundle creado por webpack.

Vamos un poco más despacio y profundicemos en cada uno de los conceptos.

Loaders

Los loaders nos ayudan a expandir las capacidades de webpack para que este pueda analizar cada recurso de nuestra aplicación que tenga una extensión diferente a las anteriores, a fin que por debajo construya un Dependency Graph, el cual tiene como objetivo entender todas las dependencias (todos tus archivos e imágenes) que necesita nuestra app.

Webpack solo conoce tus archivos cuando son importados (con import) y utilizados en tu proyecto, de tal forma que puede pasar por alto el código que no es usado, para así obtener un mejor performance

Ten en cuenta que los loaders no vienen incluidos en webpack, por lo que deberás instalarlos como dependencia de desarrollo con NPM o yarn.

Ejemplo con los loaders de estilos:

npm install --save-dev style-loader css-loader stylus-loader

Por lo general, tu archivo de configuración de webpack tendrá los loaders siempre dentro de module en un array de rules, como se ve aquí abajo 👇🏻

//webpack.config.jsconst path = require("path");

module.exports = {
  //Estrucura básica de un archivo de configuración de webpack
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: "production",
  module: {
    rules: [
      {
        // Webpack se encargará de evaluar cada archivo para pasárselo a// su respectivo loader, es por eso que al argumento "test" le pasamos// como valor una expresión regular
        test: /\.css|.styl$/i,
        // En algunos casos, como con los archivos de estilos, puedes usar// multiples loaders
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
};

Estos son algunos de los loaders más populares:

url-loader
file-loader: es de gran ayuda para utilizar binarios dentro de nuestra app con import
html-loader: ayuda a minificar el html si es necesario
css-loader: interpreta los estilos de la app
babel-loader: aunque webpack entiende JS, este loader ayuda a transformar el código con una sintaxis moderna a una sintaxis más universal para todos los navegadores
style-loader: mientras que css-loader interpreta estilos, style-loader se encarga de inyectarlos a nuestra app

Plugins

Los plugins le dan superpoderes a Webpack y hacen todo lo que los loaders no pueden hacer, como elaborar bundles ultraligeros para darle un mayor performance a tu App o utilizar templates para evitar problemas con los hashes dentro de tu archivo html si necesitas usar algún binario.

Al igual que los loaders, los plugins debes instalarse con NPM o yarn, como dependencia de desarrollo.

Ejemplo con html-webpack-plugin:

npm install --save-dev html-webpack-plugin

Una de sus características que te ayudarán a diferenciarlos de mejor manera es el que todos los vas a encontrar como una clase, por lo que deberás instanciar el plugin cada que lo utilices con la keywork new.

⚠ En ocasiones especiales, como en el caso de mini-css-extract-plugin, puedes usar su loader sin instanciar el plugin.

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
  // A diferencia de los loaders, los plugins no están dentro del atributo// "module" aunque en algunos casos los plugins pueden tener metodos que// funcionen como loaders// La mayoría de los plugins los instanciaras dentro de un array llamado// "Plugins" o dentro de "optimization" dependiendo el caso
  plugins: [
    new HtmlWebpackPlugin({
      // En ocasiones los plugins necesitaran un objeto de configuración
      template: './public/index.html',
      filename: './index.html'
    })
  ],
  optimization: {
    minimize: true,
    // Dentro de minimizer podemos usar plugins para comprimir nuestros recursos
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()]
  }
}

Conclusión

Como habrás notado, uno no esta peleado con el otro, realmente hacen un excelente trabajo juntos.

Si quieres tener un desarrollo más cómodo, te invito a conocer más a fondo esta herramienta, así como su diversidad de loaders y plugins para que lleves tus aplicaciones web al siguiente nivel, te recomiendo los siguientes cursos de Platzi donde te volverás un master usando esta herramienta en proyectos super completos 👇🏻

#NuncaParesDeAprender

Leonardo de los angeles

LeoCode0

49090Puntos

hace 3 años

Todas sus entradas