Use content hashing for font and image URLs

package.json

@@ -33,8 +33,8 @@
     "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:compile": "npm run reskindex && babel --source-maps -d lib src",
-    "build:bundle": "cross-env NODE_ENV=production webpack-cli -p --progress --bail --mode production",
-    "build:bundle:dev": "webpack-cli --progress --bail --mode development",
+    "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
+    "build:bundle:dev": "webpack --progress --bail --mode development",
     "build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64",
     "build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run build",
     "build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init",
@@ -100,6 +100,7 @@
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
     "cross-env": "^4.0.0",
+    "css-loader": "^2.1.0",
     "electron-builder": "^20.29.0",
     "electron-builder-squirrel-windows": "^11.6.1",
     "electron-devtools-installer": "^2.2.4",
@@ -110,6 +111,7 @@
     "eslint-plugin-flowtype": "^2.50.3",
     "eslint-plugin-react": "^7.11.1",
     "expect": "^1.16.0",
+    "file-loader": "^3.0.1",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.3",
@@ -136,7 +138,6 @@
     "postcss-scss": "^1.0.6",
     "postcss-simple-vars": "^4.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
-    "raw-loader": "^0.5.1",
     "react-addons-perf": "^15.4.0",
     "react-addons-test-utils": "^15.6.0",
     "rimraf": "^2.4.3",

res/home.html

@@ -130,7 +130,7 @@ <h2>_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")<
             <div>
                 <h3>_t("Search the room directory")</h3>
                 <a class="mx_HomePage_room" href="#/directory">
-                    <img class="mx_HomePage_icon" src="img/icons-directory.svg">
+                    <img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
                 </a>
                 <span class="mx_HomePage_comment">
                     _t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")

res/themes/status/css/_StatusLogin.scss

@@ -100,8 +100,8 @@ limitations under the License.
         font-size: 16px;
         line-height: 25px;
         background-color: $form-bg-color;
-        background-image: url(../../themes/status/img/dot.svg);
-        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);    
+        background-image: url("$(status)/img/dot.svg");
+        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
         position: relative;
         text-align: center;
     }

res/themes/status/css/_fonts.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family:PostGrotesk-Medium;
+  src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
+  src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family:PostGrotesk-Book;
+  src:url('https://status.im/fonts/PostGrotesk-Book.eot');
+  src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
+  font-weight: 400;
+  font-style: normal;
+}

res/themes/status/css/_paths.scss

@@ -0,0 +1,5 @@
+// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk`
+$res: ../../../../node_modules/matrix-react-sdk/res;
+
+// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web`
+$status: ..;

res/themes/status/css/_status.scss

@@ -1,19 +1,3 @@
-@font-face {
-    font-family:PostGrotesk-Medium;
-    src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
-    src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family:PostGrotesk-Book;
-    src:url('https://status.im/fonts/PostGrotesk-Book.eot');
-    src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
-    font-weight: 400;
-    font-style: normal;
-}
-
 // We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
 // N.B. that the status.im website uses:
 // font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
@@ -203,8 +187,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/status/css/status.scss

@@ -1,3 +1,5 @@
+@import "_paths.scss";
+@import "_fonts.scss";
 @import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss";
 @import "_status.scss";
 @import "../../../../node_modules/matrix-react-sdk/res/css/_components.scss";

scripts/copy-res.js

@@ -53,9 +53,9 @@ const COPY_LIST = [
     ["res/home.html", "webapp"],
     ["res/home-status.html", "webapp"],
     ["res/home/**", "webapp/home"],
-    ["res/vector-icons/**", "webapp/vector-icons"],
-    ["node_modules/matrix-react-sdk/res/{fonts,img,themes,media}/**", "webapp"],
     ["res/themes/**", "webapp/themes"],
+    ["res/vector-icons/**", "webapp/vector-icons"],
+    ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
     ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
     // XXX: This is tied quite heavily to the matching olm.js so it really should be

src/vector/index.html

@@ -40,7 +40,7 @@
         window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
     </script>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <audio id="messageAudio">
         <source src="media/message.ogg" type="audio/ogg" />
         <source src="media/message.mp3" type="audio/mpeg" />

webpack.config.js

@@ -28,34 +28,60 @@ module.exports = {
             {
                 test: /\.scss$/,
                 // 1. postcss-loader turns the SCSS into normal CSS.
-                // 2. raw-loader turns the CSS into a javascript module
-                //    whose default export is a string containing the CSS.
-                //    (raw-loader is similar to css-loader, but the latter
-                //    would also drag in the imgs and fonts that our CSS refers to
-                //    as webpack inputs.)
+                // 2. css-loader turns the CSS into a JS module whose default
+                //    export is a string containing the CSS, while also adding
+                //    the images and fonts from CSS as Webpack inputs.
                 // 3. ExtractTextPlugin turns that string into a separate asset.
                 use: ExtractTextPlugin.extract({
                     use: [
-                        "raw-loader",
+                        "css-loader",
                         {
                             loader: 'postcss-loader',
                             options: {
                                 config: {
-                                    path: './postcss.config.js'
-                                }
-                            }
-                        }
+                                    path: './postcss.config.js',
+                                },
+                            },
+                        },
                     ],
                 }),
             },
             {
                 // this works similarly to the scss case, without postcss.
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
-                    use: "raw-loader"
+                    use: "css-loader",
                 }),
             },
-
+            {
+                test: /\.(gif|png|svg|ttf)$/,
+                // Use a content-based hash in the name so that we can set a long cache
+                // lifetime for assets while still delivering changes quickly.
+                oneOf: [
+                    {
+                        // Images referenced in HTML files
+                        issuer: /\.html$/,
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[hash:7].[ext]',
+                            outputPath: getImgOutputPath,
+                        },
+                    },
+                    {
+                        // Images referenced in JS and CSS files
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[hash:7].[ext]',
+                            outputPath: getImgOutputPath,
+                            publicPath: function(url, resourcePath) {
+                                // JS and CSS image usages end up the `bundles/[hash]` output
+                                // directory, so we adjust the final path to navigate up twice.
+                                return path.join("../..", getImgOutputPath(url, resourcePath));
+                            },
+                        },
+                    },
+                ],
+            },
         ],
         noParse: [
             // for cross platform compatibility use [\\\/] as the path separator
@@ -75,14 +101,13 @@ module.exports = {
     output: {
         path: path.join(__dirname, "webapp"),
 
-        // the generated js (and CSS, from the ExtractTextPlugin) are put in a
+        // The generated JS (and CSS, from the ExtractTextPlugin) are put in a
         // unique subdirectory for the build. There will only be one such
         // 'bundle' directory in the generated tarball; however, hosting
         // servers can collect 'bundles' from multiple versions into one
         // directory and symlink it into place - this allows users who loaded
         // an older version of the application to continue to access webpack
         // chunks even after the app is redeployed.
-        //
         filename: "bundles/[hash]/[name].js",
         chunkFilename: "bundles/[hash]/[name].js",
         devtoolModuleFilenameTemplate: function(info) {
@@ -158,3 +183,17 @@ module.exports = {
         inline: false,
     },
 };
+
+/**
+ * Merge assets found via CSS and imports into a single tree, while also preserving
+ * directories under `res`.
+ *
+ * @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
+ * @param {string} resourcePath The absolute path to the source file with unmodified name.
+ * @return {string} The returned paths will look like `img/warning.1234567.svg`.
+ */
+function getImgOutputPath(url, resourcePath) {
+    const prefix = /^.*\/res\//;
+    const outputDir = path.dirname(resourcePath).replace(prefix, "");
+    return path.join(outputDir, path.basename(url));
+}