12

Migrar a Webpack 3.5 y no morir en el intento

9082Puntos

hace 4 años

Desde hace algún tiempo muchos de ustedes habrán notado como muchos de los paquetes mas usados suben de versiones super rápido, esto conlleva a que tu aplicación se quede desfasada y muchas veces hay que migrar un montón de cosas.

En mi caso ha sido la migración de Webpack 1.12 a 3.5, esto me ha hecho descubrir un montón de cosas nuevas, pero también me ha causado ciertos dolores de cabeza y por eso he decidido facilitarles este proceso con los aspectos mas importantes al momento de iniciar esta migración.

Resolvers

Lo primero con lo que me encontré es que la forma en que se configuran los resolvers.

Antes:

resolve: {
    root: path.join(__dirname, ‘src’),
  },

Ahora:

resolve: {
   modules: [
     path.join(__dirname, ‘src'),
     'node_modules',
   ],
},

Pueden notar que root ya no se usa, en lugar de esto debemos incluir nuestros resolvers en un array dentro de modules.

Loaders

Otra de las cosas y particularmente ha sido la que mas me ha gustado es la forma en la que definimos nuestros loaders:

Antes los definíamos así:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: 'babel',
    },
    {
      test: /\.json?$/,
      loader: 'json',
    },
 ]
}

Ahora sería de la siguiente manera:

module: {
  rules: [
    use: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: ‘babel-loader',
      },
    ]
  ]
}

Si tienen ojo critico podrán notar 3 cambios evidentes.

  1. La estructura del module:
  • Antes debíamos enviarle un array a loaders dentro de module y este contenía todos los loaders.
  • Ahora ese array de loaders es cambiado por uno llamado rules y luego debemos indicarle cuales debemos usar. Esto lo hacemos en otro array que recibe todas nuestras reglas.
  1. El json loader
  • Quizás esta sea la mas evidente y piensen que me salte eso sin querer, pero no es así 😃 Ahora webpack incluye el json-loader por defecto.
  1. Por último y no menos importante el hecho de que ahora TODOS nuestros loaders deben seguir el siguiente formato: [loader-name]-loader.

Eslint

Si les encanta mantener su código bien estructurado, siguiendo las buenas practicas y se ayudan con eslint la forma correcta de migrar su loader es la siguiente:

Antes:

module: {
  preLoaders: [
    {
      test: /\.js$/,
      loader: 'eslint-loader'
    },
  ],
}

Ahora:

{
  test: /\.js$/,
  enforce: "pre",
  exclude: '/node_modules/',
  use: {
    loader: 'eslint-loader',
  },
},

Este se debe añadir justo encima de nuestros loaders y agregar el respectivo .eslintsrc en el root de su proyecto.

¿ Buscan referencia del porque estos cambios ?

Pueden visitar la documentación de webpack y ahí encontrarán mucha más información.

¿Quieres aprender mucho más?

Entra en Platzi.com y descubre todos los cursos que tienes a tu disposición. Te aseguro que no te arrepentirás.

Carlos
Carlos
sampol.90

9082Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2