Para integrar Babel en Webpack 4 y convertir código ES6+ a ES5, se utiliza babel-loader. Primero, instale las dependencias requeridas con el siguiente comando.

npm install -D babel-loader @babel/core @babel/preset-env

Luego, configure el archivo webpack.config.js para aplicar babel-loader a los archivos JavaScript. Un ejemplo básico incluye definir la entrada, salida y las reglas del módulo.

module.exports = {
  entry: {
    miAplicacion: './miApp.js'
  },
  output: {
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  mode: 'development'
}

Los presets de Babel permiten especificar cómo transformar el código. El preset @babel/preset-env se configura comúnmente con la opción targets para definir los navegadores objetivo.

module.exports = {
  entry: {
    miAplicacion: './miApp.js'
  },
  output: {
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['> 0.2%']
                }
              }]
            ]
          }
        }
      }
    ]
  },
  mode: 'none'
}

Para ilustrar, considere el siguiente fragmento de código fuente que usa características de ES6.

const multiplicar = (a, b) => {
  return a * b;
}

let numeros = [10, 20, 30, 40]

numeros.includes(20)

console.log(new Set(numeros))

Al transpilar con la configuración anterior usando browsers: ['> 0.2%'], el código resultante se convierte a sintaxis ES5 para mayor compatibilidad.

/******/ ([
/* 0 */
/***/ (function(module, exports) {

var multiplicar = function multiplicar(a, b) {
  return a * b;
};

var numeros = [10, 20, 30, 40];
numeros.includes(20);
console.log(new Set(numeros));

/***/ })

Si se ajusta la configuración de targets para un navegador moderno como Chrome 62, el código mantiene la sintaxis ES6.

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  browsers: ['chrome 62']
                }
              }]
            ]
          }
        }
      }
    ]
  }

El resultado transpilado conserva las arrow functions y otras características de ES6 cuando el navegador es compatible.

/* 0 */
/***/ (function(module, exports) {

const multiplicar = (a, b) => {
  return a * b;
};

let numeros = [10, 20, 30, 40];
numeros.includes(20);
console.log(new Set(numeros));

/***/ })

La configuración de browsers afecta directamente el nivel de transpilación. Para más opciones, consulte la lista de navegadores en https://github.com/browserslist/browserslist.

Para funciones y métodos como Set, Map o Array.from que pueden faltar en navegadores antiguos, se necesitan polyfills. Babel Polyfill es un polyfill global que inyecta soporte completo, pero puede causar contaminación del espacio global. Se instala como dependencia de producción y se importa en el código.

npm install --save @babel/polyfill

import "@babel/polyfill";

El paquete resultante incluye el polyfill y asegura la compatibilidad.

/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);

var multiplicar = function multiplicar(a, b) {
  return a * b;
};

var numeros = [10, 20, 30, 40];
numeros.includes(20);
console.log(new Set(numeros));

Alternativamente, @babel/plugin-transform-runtime proporciona un polyfill local sin contaminación global, ideal para bibliotecas o frameworks. Se instala como dependencia de desarrollo y se configura como plugin.

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

plugins: ['@babel/transform-runtime']

Este plugin reutiliza helpers de Babel para reducir el tamaño del código y evitar duplicados, asegurando que las funciones avanzadas se soporten de manera aislada.