Webpack Code Splitting

codemirror.js

import {concat, filter, find, isEmpty, intersection, keys, map, not, reduce, uniq} from "ramda";

let theme = "paqmind";
let codemirrorModes = {
  "css": ["css"],
  "clojure": ["clj", "clojure"],
  "javascript": ["js", "javascript", "es"],
  "jinja2": ["jinja2"],
  "haskell": ["hs", "haskell"],
  "htmlmixed": ["html"],
  "python": ["py", "python"],
  "xml": ["xml"],
};

let findMode = function (classes) {
  return find(
    function(key) {
      return key ? !isEmpty(intersection(classes, codemirrorModes[key])) : false;
    }, keys(codemirrorModes));
};

let insertAfter = function (referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
};

if (document.querySelectorAll("code")) {
  let items = document.querySelectorAll("code");
  let itemsClasses = uniq(reduce((memo, item) => { // list of list of classes
    memo.push(Array.from(item.classList));
    return memo;
  }, [], Array.from(items)));
  let modes = uniq(reduce((memo, item) => {
      let result = findMode(item)
      if (result) memo.push(findMode(item));
      return memo;
    }, [], itemsClasses));

  if (!isEmpty(modes)) {
    require.ensure(["codemirror/lib/codemirror.css", "codemirror/lib/codemirror"], function(require) {
      require("codemirror/lib/codemirror.css");
      require("../less/site/modules/cm-theme-paqmind.less");
      require("codemirror/lib/codemirror");
      let CodeMirror = require("codemirror");
      modes.map((mode) => {require(`codemirror/mode/${mode}/${mode}`);});

      Array.from(items).forEach(function (inputElem) {
        let outputElem = document.createElement("div");
        let classes = Array.from(inputElem.classList);
        let mode = findMode(classes);

        inputElem.style.display = "none";
        outputElem.className = "CodeMirror cm-s-paqmind " + (inputElem.parentNode.nodeName == "PRE" ? "block" : "inline");
        insertAfter(inputElem, outputElem);

        CodeMirror(outputElem, {
          value: inputElem.innerText.trim(),
          mode: mode,
          theme: theme,
        });

        outputElem.innerHTML = outputElem.querySelector(":scope .CodeMirror-code").outerHTML;
      });
    });
  }
}

webpack.config.js

import Path from "path";
import Webpack from "webpack";
import ExtractTextPlugin from "extract-text-webpack-plugin";
import AssetsPlugin from "assets-webpack-plugin";

const AUTOPREFIXER = "autoprefixer?{browsers: ['> 5%']}";

export default {
  // http://webpack.github.io/docs/configuration.html#entry
  entry: {
    theme: "./theme.js",
  },

  // http://webpack.github.io/docs/configuration.html#output
  output: {
    // http://webpack.github.io/docs/configuration.html#output-path
    path: Path.resolve(__dirname, "public"),

    // http://webpack.github.io/docs/configuration.html#output-filename
    filename: "theme.js?[chunkhash]",

    // http://webpack.github.io/docs/configuration.html#output-publicpath
    publicPath: "/",

    // http://webpack.github.io/docs/configuration.html#output-pathinfo
    pathinfo: false,
  },

  // http://webpack.github.io/docs/configuration.html#debug
  debug: false,

  // http://webpack.github.io/docs/configuration.html#devtool
  devtool: null,

  // http://webpack.github.io/docs/configuration.html#profile
  profile: false,

  // http://webpack.github.io/docs/configuration.html#module
  module: {
    // http://webpack.github.io/docs/loaders.html
    loaders: [
      // https://github.com/babel/babel-loader
      {test: /\.(js(\?.*)?)$/, loaders: ["babel?stage=0"], exclude: /node_modules/},

      // https://github.com/webpack/json-loader
      {test: /\.(json(\?.*)?)$/,  loaders: ["json"]},

      // https://github.com/webpack/css-loader
      {test: /\.(css(\?.*)?)$/, loader: ExtractTextPlugin.extract(`css!${AUTOPREFIXER}`)},

      // https://github.com/webpack/less-loader
      {test: /\.(less(\?.*)?)$/, loader: ExtractTextPlugin.extract(`css!${AUTOPREFIXER}!less`)},

      // https://github.com/webpack/url-loader
      {test: /\.(jpg(\?.*)?)$/,   loaders: ["url?limit=100000"]},
      {test: /\.(jpeg(\?.*)?)$/,  loaders: ["url?limit=100000"]},
      {test: /\.(png(\?.*)?)$/,   loaders: ["url?limit=100000"]},
      {test: /\.(gif(\?.*)?)$/,   loaders: ["url?limit=100000"]},
      {test: /\.(svg(\?.*)?)$/,   loaders: ["url?limit=100000"]},
      {test: /\.(ttf(\?.*)?)$/,   loaders: ["url?limit=100000"]},
      {test: /\.(woff(\?.*)?)$/,  loaders: ["url?limit=100000"]},
      {test: /\.(woff2(\?.*)?)$/, loaders: ["url?limit=100000"]},
      {test: /\.(eot(\?.*)?)$/,   loaders: ["url?limit=100000"]},
    ],
  },

  // http://webpack.github.io/docs/configuration.html#resolve
  resolve: {
    // http://webpack.github.io/docs/configuration.html#resolve-root
    root: Path.resolve("./theme"),

    // http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories
    modulesDirectories: ["node_modules"],
  },

  // http://webpack.github.io/docs/list-of-plugins.html
  plugins: [
    // https://github.com/webpack/extract-text-webpack-plugin/issues/120
    new ExtractTextPlugin("[name].css?[contenthash]", {allChunks: true}),
    new AssetsPlugin({
      path: Path.resolve(__dirname, "public"),
      prettyPrint: true,
    }),
  ],
};