Improving caching of static assets (mattermost#3591)

Makefile

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

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';

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",

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');

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;