Add support for CommonsChunkPlugin for Webpack.

This lets us consolidate chunks of JavaScript that are common to
multiple bundles, so that they can live in their own shared file. This
will be more relevant when we have UI components -- there's actually
very little shared code right now.

common/djangoapps/pipeline_mako/templates/static_content.html

@@ -96,6 +96,7 @@ source, template_path = Loader(engine).load_template_source(path)
         try:
             return Template("""
                 {% load render_bundle from webpack_loader %}
+                {% render_bundle "commons" %}
                 {% render_bundle entry %}
                 <script type="text/javascript">
                     {% autoescape off %}{{ body }}{% endautoescape %}

common/static/common/js/karma.common.conf.js

@@ -44,6 +44,18 @@ var webpackConfig = require(path.join(appRoot, 'webpack.config.js'));
 
 delete webpackConfig.entry;
 
+// The following crazy bit is to work around the webpack.optimize.CommonsChunkPlugin
+// plugin. The problem is that it it factors out the code that defines webpackJsonp
+// and puts in in the commons JS, which Karma doesn't know to load first. This is a
+// workaround recommended in the karma-webpack bug report that basically just removes
+// the plugin for the purposes of Karma testing (the plugin is meant to be an
+// optimization only).
+//     https://github.com/webpack-contrib/karma-webpack/issues/24#issuecomment-257613167
+//
+// This should be fixed in v3 of karma-webpack
+const commonsChunkPluginIndex = webpackConfig.plugins.findIndex(plugin => plugin.chunkNames);
+webpackConfig.plugins.splice(commonsChunkPluginIndex, 1);
+
 // Files which are needed by all lms/cms suites.
 var commonFiles = {
     libraryFiles: [

webpack.config.js

@@ -53,6 +53,21 @@ var wpconfig = {
             $: 'jquery',
             jQuery: 'jquery',
             'window.jQuery': 'jquery'
+        }),
+
+        // Note: Until karma-webpack releases v3, it doesn't play well with
+        // the CommonsChunkPlugin. We have a kludge in karma.common.conf.js
+        // that dynamically removes this plugin from webpack config when
+        // running those tests (the details are in that file). This is a
+        // recommended workaround, as this plugin is just an optimization. But
+        // because of this, we really don't want to get too fancy with how we
+        // invoke this plugin until we can upgrade karma-webpack.
+        new webpack.optimize.CommonsChunkPlugin({
+            // If the value below changes, update the render_bundle call in
+            // common/djangoapps/pipeline_mako/templates/static_content.html 
+            name: 'commons',
+            filename: 'commons.js',
+            minChunks: 2
         })
     ],