From 962b09f73c5cd659bba4ee5f040c33544fb7f81c Mon Sep 17 00:00:00 2001
From: David Ormsbee <dave@edx.org>
Date: Wed, 21 Jun 2017 21:46:59 -0400
Subject: [PATCH] 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.
---
 .../pipeline_mako/templates/static_content.html   |  1 +
 common/static/common/js/karma.common.conf.js      | 12 ++++++++++++
 webpack.config.js                                 | 15 +++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/common/djangoapps/pipeline_mako/templates/static_content.html b/common/djangoapps/pipeline_mako/templates/static_content.html
index 1af6ee8a14..014001593d 100644
--- a/common/djangoapps/pipeline_mako/templates/static_content.html
+++ b/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 %}
diff --git a/common/static/common/js/karma.common.conf.js b/common/static/common/js/karma.common.conf.js
index 0cf9b43532..cdceaf562b 100644
--- a/common/static/common/js/karma.common.conf.js
+++ b/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: [
diff --git a/webpack.config.js b/webpack.config.js
index 6719071a23..d8e15017f0 100644
--- a/webpack.config.js
+++ b/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
         })
     ],