How to dynamically load modules in Babel and Webpack?

Question

I'm trying to use the dynamic module loading feature in ES6 and it seems that it's not actually implemented yet. But there are substitutes like ES6 Module Loader Polyfill which supposedly should do the trick for the time being.

So I have a ES6 project transpiled to ES5 using Babel and Webpack, and it works fine on its own. But all of my code is merged into one bundle.js file which I would like to split into modules. And when I tried the mentioned Polyfill, it throws some error from within and the project won't even start.

index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined

And line 6 reads:

var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//';

Here's my package.js file:

{
  "dependencies": {
    "es6-module-loader": "^0.17.11",
    "events": "^1.1.0",
    "flux": "^2.1.1",
    "fs": "0.0.2",
    "react": "^15.0.2",
    "react-addons-css-transition-group": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0",
    "react-tap-event-plugin": "^1.0.0",
  },
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "html-webpack-plugin": "^2.16.1",
    "react-hot-loader": "^1.3.0",
    "transfer-webpack-plugin": "^0.1.4",
    "webpack": "^1.13.0",
  }
}

Can someone please point me to a working example of dynamic module loading with Webpack and Babel?

Answer 1

There's really three things at play here... dynamic importing, lazy loading, and code splitting/bundling. The System.import method, poly-filled with ES6 Module Loader will allow dynamic imports but not dynamic code splitting:

However, most transpilers do not support converting System.load calls to require.ensure so you have to do that directly if you want to make use of dynamic code splitting.

Dynamic code splitting is when you create child bundles within an entry point, which you can then dynamically lazy load. For this I would recommend using the promise-loader which is a bit more friendly than require.ensure:

import LoadEditor from 'promise?global,[name]!./editor.js';

...

if (page === 'editor') {
  LoadEditor().then(Editor => {
    // Use the Editor bundle...
  })
} 

Webpack will now break the editor.js module and all of it's dependencies into a separate bundle which can be loaded immediately or dynamically (as shown above). Lastly, depending on the size of the app, I think you should also consider splitting the vendor code out.

UPDATE

System.import was removed from the spec and replace by just import(). The new webpack docs have a page that discusses dynamic imports in webpack and the limitations of them.