[js] version js file names using webpack chunkhash (#2951)

* get compiled js file names

* make manifest available as template var

* use script src directly to avoid flash of unstyled content in the case of csstheme.js

* linting

* attempt to fix tests

* exception

* print the path when no manifest file found

* handle case when manifest.json is not present for some reason, or in the case of tests

superset/__init__.py

@@ -32,6 +32,21 @@
 app.config.from_object(CONFIG_MODULE)
 conf = app.config
 
+
+@app.context_processor
+def get_js_manifest():
+    manifest = {}
+    try:
+        with open(APP_DIR + '/static/assets/dist/manifest.json', 'r') as f:
+            manifest = json.load(f)
+    except Exception as e:
+        print(
+            "no manifest file found at " +
+            APP_DIR + "/static/assets/dist/manifest.json"
+        )
+    return dict(js_manifest=manifest)
+
+
 for bp in conf.get('BLUEPRINTS'):
     try:
         print("Registering blueprint: '{}'".format(bp.name))

superset/assets/package.json

@@ -107,6 +107,7 @@
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "chai": "^4.0.2",
+    "clean-webpack-plugin": "^0.1.16",
     "codeclimate-test-reporter": "^0.5.0",
     "css-loader": "^0.28.0",
     "enzyme": "^2.0.0",
@@ -134,6 +135,7 @@
     "transform-loader": "^0.2.3",
     "url-loader": "^0.5.7",
     "webpack": "^2.3.3",
+    "webpack-manifest-plugin": "1.1.0",
     "webworkify-webpack": "2.0.4"
   }
 }

superset/assets/webpack.config.js

@@ -1,15 +1,14 @@
 const webpack = require('webpack');
 const path = require('path');
-const fs = require('fs');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 // input dir
 const APP_DIR = path.resolve(__dirname, './');
 
 // output dir
 const BUILD_DIR = path.resolve(__dirname, './dist');
 
-const VERSION_STRING = JSON.parse(fs.readFileSync('package.json')).version;
-
 const config = {
   entry: {
     'css-theme': APP_DIR + '/javascripts/css-theme.js',
@@ -23,7 +22,8 @@ const config = {
   },
   output: {
     path: BUILD_DIR,
-    filename: `[name].${VERSION_STRING}.entry.js`,
+    filename: '[name].[chunkhash].entry.js',
+    chunkFilename: '[name].[chunkhash].entry.js',
   },
   resolve: {
     extensions: [
@@ -115,6 +115,8 @@ const config = {
     'react/lib/ReactContext': true,
   },
   plugins: [
+    new ManifestPlugin(),
+    new CleanWebpackPlugin(['dist']),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),

superset/templates/superset/partials/_script_tag.html

@@ -1,4 +1,5 @@
-{% set VERSION_STRING = appbuilder.get_app.config.get("VERSION_STRING") %}
 {% block tail_js %}
-  <script src="/static/assets/dist/{{filename}}.{{VERSION_STRING}}.entry.js"></script>
+  <script
+    src="{{ '/static/assets/dist/' + js_manifest.get(filename + '.js', '') }}">
+  </script>
 {% endblock %}