CODEWITHSUNDEEP
javascriptwebpackecmascript-6babeljs
User 5842
User 5842

Reputation: 3029

Arrow functions in webpack output despite using babel-loader and browser targets

I am getting started with Webpack and have so far been able to compile code for different browsers using the babel-loader. I have a simple webpack.config.js file:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: ''
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    compress: true,
    port: 8080,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: "/node_modules/"
      }
    ]
  }
}

And similarly, a simple babel.config.js file:

const presets = [
    ['@babel/env', {
      targets: {
        edge: '17',
        ie: '11',
        firefox: '50',
        chrome: '64',
        safari: '11.1'
      },
      useBuiltIns: "entry",
      corejs: '^3',
    }]
  ];
  
  module.exports = { presets };

My output however is what is confusing to me:

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/    var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ (() => {

eval("var numbers = [2, 3, 5]; // Arrow function. How will Internet Explorer cope with it?\n\nvar doubledNumbers = numbers.map(function (number) {\n  return number * 2;\n});\nconsole.log(doubledNumbers); // 4, 6, 10\n\n//# sourceURL=webpack://practicum/./src/index.js?");

/***/ })

/******/    });
/************************************************************************/
/******/    
/******/    // startup
/******/    // Load entry module and return exports
/******/    // This entry module can't be inlined because the eval devtool is used.
/******/    var __webpack_exports__ = {};
/******/    __webpack_modules__["./src/index.js"]();
/******/    
/******/ })()
;

I see that the arrow function has been removed from the map method but what is with the outer arrow functions? Are those webpack specific?

I feel like the line:

It uses "eval()" calls to create a separate source file in the browser devtools.

Is important and maybe these arrow functions are removed during browser execution.

Upvotes: 1

Views: 901

Answers (1)

User 5842
User 5842

Reputation: 3029

Aha, I found the answer clear as day: Top level function (IIFE) is still arrow (on Webpack 5).

Upvotes: 2

Related Questions