Adds file caching into our assets (#456)

* Adds nvmrc file to help sync on node version to our contributors

* Adding FlaskManageWebpack

* Testing a lot of stuff

* Parametrizes webpack configuration

* Cleanup

* Cleaning conflict marks

* Renaming site.webmanifest into manifest.json files

* Adds names to manifest files

amundsen_application/static/.nvmrc

+v12

amundsen_application/static/images/favicons/dev/site.webmanifest → amundsen_application/static/images/favicons/dev/manifest.json

 {
-    "name": "",
-    "short_name": "",
+    "name": "Amundsen Dev",
+    "short_name": "Amundsen Dev",
     "icons": [
         {
             "src": "/static/images/favicons/dev/android-chrome-192x192.png",

amundsen_application/static/images/favicons/prod/site.webmanifest → amundsen_application/static/images/favicons/prod/manifest.json

 {
-    "name": "Amundsen",
-    "short_name": "Amundsen",
-    "icons": [
+  "name": "Amundsen",
+  "short_name": "Amundsen",
+  "icons": [
         {
             "src": "/static/images/favicons/prod/android-chrome-192x192.png",
             "sizes": "192x192",

amundsen_application/static/images/favicons/staging/site.webmanifest → amundsen_application/static/images/favicons/staging/manifest.json

 {
-    "name": "",
-    "short_name": "",
+    "name": "Amundsen",
+    "short_name": "Amundsen",
     "icons": [
         {
             "src": "/static/images/favicons/staging/android-chrome-192x192.png",

amundsen_application/static/package.json

@@ -67,7 +67,7 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "4.3.0",
     "jest": "^25.5.4",
     "jest-css-modules": "^2.1.0",
     "mini-css-extract-plugin": "^0.4.5",

amundsen_application/static/templates/fragments/icons-dev.html

@@ -2,7 +2,7 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/dev/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/dev/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/dev/favicon-16x16.png">
-<link rel="manifest" href="/static/images/favicons/dev/site.webmanifest">
+<link rel="manifest" href="/static/images/favicons/dev/manifest.json">
 <link rel="mask-icon" href="/static/images/favicons/dev/safari-pinned-tab.svg" color="#5bbad5">
 <link rel="shortcut icon" href="/static/images/favicons/dev/favicon.ico">
 <meta name="msapplication-TileColor" content="#2d89ef">

amundsen_application/static/templates/fragments/icons-prod.html

@@ -2,7 +2,7 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/prod/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/prod/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/prod/favicon-16x16.png">
-<link rel="manifest" href="/static/images/favicons/prod/site.webmanifest">
+<link rel="manifest" href="/static/images/favicons/prod/manifest.json">
 <link rel="mask-icon" href="/static/images/favicons/prod/safari-pinned-tab.svg" color="#5bbad5">
 <link rel="shortcut icon" href="/static/images/favicons/prod/favicon.ico">
 <meta name="msapplication-TileColor" content="#2d89ef">

amundsen_application/static/templates/fragments/icons-staging.html

@@ -2,7 +2,7 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/staging/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/staging/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/staging/favicon-16x16.png">
-<link rel="manifest" href="/static/images/favicons/staging/site.webmanifest">
+<link rel="manifest" href="/static/images/favicons/staging/manifest.json">
 <link rel="mask-icon" href="/static/images/favicons/staging/safari-pinned-tab.svg" color="#5bbad5">
 <link rel="shortcut icon" href="/static/images/favicons/staging/favicon.ico">
 <meta name="msapplication-TileColor" content="#2b5797">

amundsen_application/static/templates/index.html

@@ -18,12 +18,11 @@
       {% include 'fragments/icons-prod.html' %}
     {% endif %}
 
-    <link href="/static/dist/main.css" type="text/css" rel="stylesheet"/>
+    <%= htmlWebpackPlugin.tags.headTags %>
   </head>
   <body class="{{ env }}">
     <div id="content"/>
-    <script src="/static/dist/vendors.js" type="text/javascript"></script>
-    <script src="/static/dist/main.js" type="text/javascript"></script>
+    <%= htmlWebpackPlugin.tags.bodyTags %>
   </body>
 
   {% if <%= htmlWebpackPlugin.options.config.google.enabled%> %}

amundsen_application/static/webpack.common.ts

-import * as path from 'path';
-import * as fs from 'fs';
-import * as webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import * as path from "path";
+import * as fs from "fs";
+import * as webpack from "webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 // import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
-import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
-import {CleanWebpackPlugin} from 'clean-webpack-plugin';
+import MomentLocalesPlugin from "moment-locales-webpack-plugin";
+import {CleanWebpackPlugin} from "clean-webpack-plugin";
 
-import appConfig from './js/config/config';
+import appConfig from "./js/config/config";
 
+const TSX_PATTERN = /\.ts|\.tsx$/;
+const JSX_PATTERN = /\.jsx?$/;
+const CSS_PATTERN = /\.(sa|sc|c)ss$/;
+const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
+const VENDORS_PATTERN = /[\\/]node_modules[\\/](react|react-dom)[\\/]/;
+
+const PATHS = {
+  dist: path.join(__dirname, "/dist"),
+  components: path.join(__dirname, "/js/components"),
+  config: path.join(__dirname, "/js/config"),
+  ducks: path.join(__dirname, "/js/ducks"),
+  interfaces: path.join(__dirname, "/js/interfaces"),
+  utils: path.join(__dirname, "/js/utils"),
+  css: path.join(__dirname, "/css/")
+};
+
+// Process of Templates
 const walkSync = (dir, filelist = []) => {
   fs.readdirSync(dir).forEach(file => {
     filelist = fs.statSync(path.join(dir, file)).isDirectory()
@@ -17,82 +34,90 @@ const walkSync = (dir, filelist = []) => {
   });
   return filelist;
 };
-const templatesList = walkSync('templates');
+const templatesList = walkSync("templates");
 const htmlWebpackPluginConfig = templatesList.map(file => {
   return new HtmlWebpackPlugin({
-      filename: file,
-      template: file,
-      config: appConfig,
-      inject: false,
-    });
+    filename: file,
+    template: file,
+    config: appConfig,
+    inject: false
+  });
 });
 
 const config: webpack.Configuration = {
-    entry: {
-      main: [
-        path.join(__dirname, '/css/styles.scss'),
-        path.join(__dirname, '/js/index.tsx')
-      ],
-    },
-    output: {
-        path: path.join(__dirname, '/dist'),
-        filename: '[name].js',
+  entry: {
+    main: [
+      path.join(__dirname, "/css/styles.scss"),
+      path.join(__dirname, "/js/index.tsx")
+    ]
+  },
+  output: {
+    publicPath: "/static/dist",
+    path: PATHS.dist,
+    filename: "[name].[contenthash].js"
+  },
+  devtool: "source-map",
+  resolve: {
+    alias: {
+      components: PATHS.components,
+      config: PATHS.config,
+      ducks: PATHS.ducks,
+      interfaces: PATHS.interfaces,
+      utils: PATHS.utils
     },
-    devtool: 'source-map',
-    resolve: {
-        alias: {
-            components: path.join(__dirname, '/js/components'),
-            config: path.join(__dirname, '/js/config'),
-            ducks: path.join(__dirname, '/js/ducks'),
-            interfaces: path.join(__dirname, '/js/interfaces'),
-            utils: path.join(__dirname, '/js/utils'),
-        },
-        extensions: ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.ts|\.tsx$/,
-          loader: 'ts-loader',
-        },
-        {
-          test: /\.jsx?$/,
-          exclude: /node_modules/,
-          use: 'babel-loader',
-        },
-        {
-          test: /\.(sa|sc|c)ss$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader', {
-            loader: 'sass-loader',
+    extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".scss"]
+  },
+  module: {
+    rules: [
+      {
+        test: TSX_PATTERN,
+        loader: "ts-loader"
+      },
+      {
+        test: JSX_PATTERN,
+        exclude: /node_modules/,
+        use: "babel-loader"
+      },
+      {
+        test: CSS_PATTERN,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          {
+            loader: "sass-loader",
             options: {
-              includePaths: [path.join(__dirname, '/css/')]
+              includePaths: [PATHS.css]
             }
-          }],
-        },
-        {
-          test: /\.(png|svg|jpg|gif)$/,
-          use: 'file-loader',
-        },
-      ],
-    },
-    plugins: [
-      new CleanWebpackPlugin(),
-      new MomentLocalesPlugin(),    // To strip all locales except “en”
-      new MiniCssExtractPlugin(),
-      ...htmlWebpackPluginConfig,
-      // new BundleAnalyzerPlugin()   // Uncomment to analyze the production bundle on local
-    ],
-    optimization: {
-      splitChunks: {
-        cacheGroups: {
-          default: false,
-          major: {
-            name: 'vendors',
-            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
-            chunks: 'all',
-          },
-        },
+          }
+        ]
       },
-    },
+      {
+        test: IMAGE_PATTERN,
+        use: "file-loader"
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MomentLocalesPlugin(), // To strip all locales except “en”
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css"
+    }),
+    ...htmlWebpackPluginConfig
+    // new BundleAnalyzerPlugin()   // Uncomment to analyze the production bundle on local
+  ],
+  optimization: {
+    moduleIds: "hashed",
+    splitChunks: {
+      cacheGroups: {
+        default: false,
+        major: {
+          name: "vendors",
+          test: VENDORS_PATTERN,
+          chunks: "all"
+        }
+      }
+    }
+  }
 };
 export default config;

amundsen_application/static/webpack.dev.ts

@@ -4,6 +4,7 @@ import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
 import commonConfig from './webpack.common';
 
 export default merge(commonConfig, {
+  devtool: 'inline-source-map',
   plugins: [
     // new BundleAnalyzerPlugin()     // Uncomment to check the bundle size on dev
   ],