Improving caching of static assets (#3591)

webapp/Makefile

@@ -20,6 +20,8 @@ test: .npminstall
 build: .npminstall
 	@echo Building mattermost Webapp
 
+	rm -rf dist
+
 	npm run build
 
 run: .npminstall

webapp/i18n/i18n.jsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-const de = require('!!file?name=i18n/[name].[ext]!./de.json');
-const es = require('!!file?name=i18n/[name].[ext]!./es.json');
-const fr = require('!!file?name=i18n/[name].[ext]!./fr.json');
-const ja = require('!!file?name=i18n/[name].[ext]!./ja.json');
-const pt_BR = require('!!file?name=i18n/[name].[ext]!./pt-BR.json'); //eslint-disable-line camelcase
+const de = require('!!file?name=i18n/[name].[hash].[ext]!./de.json');
+const es = require('!!file?name=i18n/[name].[hash].[ext]!./es.json');
+const fr = require('!!file?name=i18n/[name].[hash].[ext]!./fr.json');
+const ja = require('!!file?name=i18n/[name].[hash].[ext]!./ja.json');
+const pt_BR = require('!!file?name=i18n/[name].[hash].[ext]!./pt-BR.json'); //eslint-disable-line camelcase
 
 import {addLocaleData} from 'react-intl';
 import deLocaleData from 'react-intl/locale-data/de';

webapp/package.json

@@ -50,6 +50,7 @@
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.8.5",
     "html-loader": "0.4.3",
+    "html-webpack-plugin": "2.22.0",
     "imports-loader": "0.6.5",
     "image-webpack-loader": "1.8.0",
     "jquery-deferred": "0.3.0",

webapp/root.html

@@ -34,11 +34,8 @@
 
     <!-- CSS Should always go first -->
     <link rel='stylesheet' class='code_theme'>
-    <!--<link rel='stylesheet' href='/static/css/styles.css'>-->
     <style id='antiClickjack'>body{display:none !important;}</style>
 
-    <script src='/static/bundle.js'></script>
-
     <script type='text/javascript'>
         if (self === top) {
             var blocker = document.getElementById('antiClickjack');

webapp/webpack.config.js

@@ -4,7 +4,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 
-const htmlExtract = new ExtractTextPlugin('html', 'root.html');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
 
@@ -28,8 +28,8 @@ var config = {
     output: {
         path: 'dist',
         publicPath: '/static/',
-        filename: 'bundle.js',
-        chunkFilename: '[name].[hash].[chunkhash].js'
+        filename: '[name].[hash].js',
+        chunkFilename: '[name].[chunkhash].js'
     },
     module: {
         loaders: [
@@ -90,7 +90,7 @@ var config = {
             },
             {
                 test: /\.html$/,
-                loader: htmlExtract.extract('html?attrs=link:href')
+                loader: 'html?attrs=link:href'
             }
         ]
     },
@@ -101,7 +101,6 @@ var config = {
         new webpack.ProvidePlugin({
             'window.jQuery': 'jquery'
         }),
-        htmlExtract,
         new CopyWebpackPlugin([
             {from: 'images/emoji', to: 'emoji'},
             {from: 'images/logo-email.png', to: 'images'},
@@ -168,7 +167,18 @@ if (!DEV) {
 
 // Test mode configuration
 if (TEST) {
+    config.entry = ['babel-polyfill', './root.jsx'];
+    config.target = 'node';
     config.externals = [nodeExternals()];
+} else {
+    // For some reason this breaks mocha. So it goes here.
+    config.plugins.push(
+        new HtmlWebpackPlugin({
+            filename: 'root.html',
+            inject: 'head',
+            template: 'root.html'
+        })
+    );
 }
 
 module.exports = config;