Build and handle jsfiles using webpack instead of django-pipeline.

Also renames bundle.js to translations.js.

.eslintignore

@@ -1,3 +1,3 @@
-static/js/bundle.js
 static/js/blueslip.js
 puppet/zulip_ops/files/statsd/local.js
+static/webpack-bundles

.gitignore

@@ -22,6 +22,7 @@ static/generated/pygments_data.js
 static/generated/github-contributors.json
 static/locale/language_options.json
 static/third/emoji-data
+static/webpack-bundles
 /node_modules
 /staticfiles.json
 npm-debug.log

package.json

@@ -21,6 +21,7 @@
     "string.prototype.codepointat": "0.2.0",
     "underscore": "1.8.3",
     "webpack": "2.5.1",
+    "webpack-bundle-tracker": "0.2.0",
     "winchan": "0.2.0",
     "xdate": "0.8.0",
     "zxcvbn": "4.4.1"

requirements/common.txt

@@ -157,6 +157,9 @@ uritemplate==3.0.0
 # Django extension for static asset pipeline
 django-pipeline==1.6.12
 
+# Django extension for serving webpack modules
+django-webpack-loader==0.5.0
+
 # Needed for iOS push notifications
 git+https://github.com/sharmaeklavya2/PyAPNs.git@remove-simplejson#egg=apns==2.0.1
 

templates/zerver/index.html

@@ -37,9 +37,7 @@ var page_params = {{ page_params }};
 {% endif %}
 {{ minified_js('app')|safe }}
 
-{% if not pipeline %}
+{{ render_bundle('translations') }}
-<script type="text/javascript" src="/webpack/bundle.js"></script>
-{% endif %}
 
 {% if debug %}
 {{ minified_js('app_debug')|safe }}

tools/minify-js

@@ -87,7 +87,6 @@ if prev_deploy:
 # Always use the newly compiled handlebars templates and webpack bundle.
 if prev_deploy:
     changed_files.add(os.path.join(STATIC_PATH, 'templates/compiled.js'))
-    changed_files.add(os.path.join(STATIC_PATH, 'js/bundle.js'))
 
 JS_SPECS = settings.JS_SPECS
 CLOSURE_BINARY = '/usr/bin/closure-compiler'

tools/test-backend

@@ -196,6 +196,10 @@ if __name__ == "__main__":
                       default=False,
                       help=("Run the tests which failed the last time "
                             "test-backend was run.  Implies --nonfatal-errors."))
+    parser.add_option('--no-webpack', dest='no_webpack',
+                      action="store_true",
+                      default=False,
+                      help="Do not run webpack in tests.")
 
     (options, args) = parser.parse_args()
     zerver_test_dir = 'zerver/tests/'
@@ -301,6 +305,10 @@ if __name__ == "__main__":
         generate_fixtures_command.append('--force')
         subprocess.call(generate_fixtures_command)
 
+    if not options.no_webpack:
+        print("Running Webpack with webpack.dev.config.js")
+        subprocess.check_call('tools/webpack')
+
     if options.processes is None:
         options.processes = 4
 

tools/webpack

@@ -21,7 +21,7 @@ def run():
     # type: () -> None
     """Builds for production, writing the output to disk"""
     subprocess.check_call(['node', 'node_modules/.bin/webpack'] +
-                          ['--config', 'tools/webpack.production.config.js'])
+                          ['--config', 'tools/webpack.production.config.js', '-p'])
 
 def run_watch(port):
     # type: (str) -> None

tools/webpack.config.js

@@ -1,11 +1,13 @@
 var path = require('path');
 
-module.exports = {
+module.exports =  {
-    entry: [
+    context: path.resolve(__dirname, "../"),
-        './static/js/src/main.js',
+    entry: {
-    ],
+        translations: ['./static/js/translations.js'],
-    output: {
-        path: path.resolve(__dirname, '../static/js'),
-        filename: 'bundle.js',
     },
+    output: {
+        path: path.resolve(__dirname, '../static/webpack-bundles'),
+        filename: '[name].js',
+    },
+    plugins: [],
 };

tools/webpack.dev.config.js

@@ -1,8 +1,10 @@
 var config = require('./webpack.config.js');
+var BundleTracker = require('webpack-bundle-tracker');
 
-config.entry.push('webpack-dev-server/client?http://0.0.0.0:9991/socket.io');
+config.entry.translations.push('webpack-dev-server/client?http://0.0.0.0:9991/socket.io');
 config.devtool = 'eval';
 config.output.publicPath = 'http://0.0.0.0:9991/webpack/';
+config.plugins.push(new BundleTracker({filename: 'static/webpack-bundles/webpack-stats-dev.json'}));
 
 config.devServer = {
     port: 9994,

tools/webpack.production.config.js

@@ -1,3 +1,8 @@
 var config = require('./webpack.config.js');
+var BundleTracker = require('webpack-bundle-tracker');
+
+config.devtool = 'source-map';
+config.output.filename = '[name]-[hash].js';
+config.plugins.push(new BundleTracker({filename: 'static/webpack-bundles/webpack-stats-production.json'}));
 
 module.exports = config;

zproject/settings.py

@@ -312,6 +312,7 @@ TEMPLATES = [
                 'jinja2.ext.i18n',
                 'jinja2.ext.autoescape',
                 'pipeline.jinja2.PipelineExtension',
+                'webpack_loader.contrib.jinja2ext.WebpackExtension',
             ],
             'context_processors': [
                 'zerver.context_processors.zulip_default_context',
@@ -360,6 +361,7 @@ INSTALLED_APPS = [
     'confirmation',
     'guardian',
     'pipeline',
+    'webpack_loader',
     'zerver',
     'social_django',
 ]
@@ -976,7 +978,6 @@ JS_SPECS = {
             'js/ui_init.js',
             'js/emoji_picker.js',
             'js/compose_ui.js',
-            # JS bundled by webpack is also included here if PIPELINE_ENABLED setting is true
         ],
         'output_filename': 'min/app.js'
     },
@@ -1008,12 +1009,16 @@ JS_SPECS = {
     }
 }
 
-if PIPELINE_ENABLED:
-    # This is also done in test_settings.py, see comment there..
-    JS_SPECS['app']['source_filenames'].append('js/bundle.js')
-
 app_srcs = JS_SPECS['app']['source_filenames']
 
+WEBPACK_STATS_FILE = 'webpack-stats-dev.json' if DEVELOPMENT else 'webpack-stats-production.json'
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'BUNDLE_DIR_NAME': 'webpack-bundles/',
+        'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-bundles', WEBPACK_STATS_FILE),
+    }
+}
+
 ########################################################################
 # LOGGING SETTINGS
 ########################################################################

zproject/test_settings.py

@@ -42,11 +42,6 @@ if USING_PGROONGA:
         DATABASES['default']
     DATABASES['default']['OPTIONS']['options'] = pg_options
 
-# In theory this should just go in zproject/settings.py inside the `if
-# PIPELINE_ENABLED` statement, but because zproject/settings.py is processed
-# first, we have to add it here as a hack.
-JS_SPECS['app']['source_filenames'].append('js/bundle.js')
-
 if "TORNADO_SERVER" in os.environ:
     # This covers the Casper test suite case
     TORNADO_SERVER = os.environ["TORNADO_SERVER"]
@@ -99,6 +94,8 @@ CACHES['database'] = {
     }
 }
 
+# Use production config from Webpack in tests
+WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = os.path.join(STATIC_ROOT, 'webpack-bundles', 'webpack-stats-production.json')
 
 if CASPER_TESTS:
     # Don't auto-restart Tornado server during casper tests