JavaScript how code splitting works with import/export and babel and webpack? how code splitting works,how webpack code splitting works

How does this work with babel or webpack or browsers in general?

Babel and Webpack follow the ES spec and transpile the import / export statement to one single file. As they also support the require syntax, they usually transpile the import statements to require() calls and the export statements to module exports, and then ship with a custom loader for modules., If you got for example:

 // A.js
 export default function() { }

 // B.js
 import A from "./A";
 A();

Then it gets transpiled to the following require syntax:

 //A.js
 exports.default = function() {};

 //B.js
 var A = require("./A").default;
 A();

That could then get wrapped to something like:

 (function() { // prevent leaking to global scope
   // emulated loader:
   var modules = {};

   function require(name) { return modules[name]; }

   function define(name, fn) {
     var module = modules[name] = { exports: {} };
     fn(module, module.exports, require);
   }


  // The code:
  define("A", function(module, exports, require) {
      // A.js
     exports.default = function() { };
  });

  define("B", function(module, exports, require) { 
    // B.js
   var A = require("A").default;
    A();
  });
 })();

how these things evolved in javascript ?

A few years ago, writing JS was restricted to browsers, and the only way to load multiple js sources was to use multiple <script> tags and use the global object to exchange functionality. That was ugly.

Then Nodejs was invented and they needed a better way to work with modules and invented the require() thing.

The writers of the spec saw a need for a native syntax for that, so import / export were introduced.

Babel and others then wrote transpilers.

What webpack the bundler does is the following:

1. You specify an input file in the config
2. You specify an output file the config

Webpack will look at all the files which the input file requires (commomJS module system) or imports (ES6 module system). It then funnels the code based on file name extention through loaders. Loaders can transpile the individual files to code the browser can understand. An example of a loader is babel or the sass/scss compiler.

After the different files are transpiled with loaders, the plugins can work at the transform the bundle of generated code into something else. The bundle is just a bunch of code which together forms piece of functionality

In won't go into detail in the internals of webpack too deeply, but the most important thing to understand is:

You use webpack so you can use split up your code in multiple files, which makes them more maintainable and easier to work with. However then requesting all these files by the client would be horrible for performance (many HTTP requests overhead). Therefore, we bundle the files into one file, or a couple so this overhead is reduced.