Lazy-loading (code splitting) ES6 using Webpack 3

00-old.js

import Flickity from 'flickity'; // flickity now appears in main bundle.

const slideshow = document.querySelector('.slideshow');

if (slideshow) {
  new Flickity(...);
} else {
  // well, slideshow doesn't exist but we're still loading Flickity on every page :-(
}

01-new.js

// better way of doing this is to wait until you know you need Flickity and use System.import which is a Webpack-specific thing

const slideshow = document.querySelector('.slideshow');

if (slideshow)
  System.import('flickity').then(Flickity => {
    new Flickity(...);
  });

// now Flickity is in a different bundle, loaded automatically at runtime only when needed (when .slideshow exists).

webpack.config.js

// make sure you include a publicPath definition in your webpack config
module.exports = {
  ...
  output: {
    publicPath: '/assets/',
  },
};

// this will be where webpack tries to resolve the individual bundle it generated when System.import() ran.