got webpack production mode running

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

app/fileReceiver.js

@@ -104,6 +104,7 @@ export default class FileReceiver extends Nanobus {
         request: 'init',
         id: this.fileInfo.id,
         filename: this.fileInfo.name,
+        type: this.fileInfo.type,
         key: this.fileInfo.secretKey,
         requiresPassword: this.fileInfo.requiresPassword,
         password: this.fileInfo.password,
@@ -128,7 +129,6 @@ export default class FileReceiver extends Nanobus {
         a.href = downloadUrl;
         document.body.appendChild(a);
         a.click();
-        URL.revokeObjectURL(downloadUrl);
       }
 
       let prog = 0;
@@ -139,7 +139,7 @@ export default class FileReceiver extends Nanobus {
         });
         prog = msg.progress;
         onprogress([prog, this.fileInfo.size]);
-        await delay();
+        await delay(1000);
       }
 
       this.downloadRequest = null;

app/serviceWorker.js

@@ -34,6 +34,7 @@ async function decryptStream(request) {
 
     const headers = {
       'Content-Disposition': 'attachment; filename=' + file.filename,
+      'Content-Type': file.type,
       'Content-Length': file.size
     };
 
@@ -61,6 +62,7 @@ self.onmessage = event => {
     const info = {
       keychain: new Keychain(event.data.key),
       filename: event.data.filename,
+      type: event.data.type,
       size: event.data.size,
       progress: 0,
       cancelled: false

package.json

@@ -77,6 +77,7 @@
     "eslint-plugin-security": "^1.4.0",
     "expose-loader": "^0.7.5",
     "extract-loader": "^2.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fast-text-encoding": "^1.0.0",
     "file-loader": "^1.1.11",
     "fluent-intl-polyfill": "^0.1.0",
@@ -86,7 +87,6 @@
     "http_ece": "^1.0.5",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.0",
-    "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^5.2.0",
     "nanobus": "^4.3.2",
     "nanotiming": "^7.3.1",

server/layout.js

@@ -30,7 +30,7 @@ module.exports = function(state, body = '') {
 
     <title>${state.title}</title>
 
-    <link rel="stylesheet" type="text/css" href="${assets.get('style.css')}" />
+    <link rel="stylesheet" type="text/css" href="${assets.get('app.css')}" />
 
     <!-- generic favicons -->
     <link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32">
@@ -67,7 +67,6 @@ module.exports = function(state, body = '') {
     ${firaTag}
     <script defer src="/jsconfig.js"></script>
     <!--<script defer src="${assets.get('runtime.js')}"></script>-->
-    <script defer src="${assets.get('style.js')}"></script>
     <script defer src="${assets.get('vendor.js')}"></script>
     <script defer src="${locales.get(state.locale)}"></script>
     <script defer src="${assets.get('cryptofill.js')}"></script>

webpack.config.js

@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const VersionPlugin = require('./build/version_plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const webJsOptions = {
   babelrc: false,
@@ -121,16 +121,17 @@ const web = {
       {
         // creates style.css with all styles
         test: /\.css$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 1
-            }
-          },
-          'postcss-loader'
-        ]
+        use: ExtractTextPlugin.extract({
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1
+              }
+            },
+            'postcss-loader'
+          ]
+        })
       },
       {
         // creates a js script for each ftl
@@ -164,17 +165,6 @@ const web = {
       }
     ]
   },
-  optimization: {
-    splitChunks: {
-      cacheGroups: {
-        style: {
-          name: 'style',
-          test: /\.css$/,
-          chunks: 'all'
-        }
-      }
-    }
-  },
   plugins: [
     new CopyPlugin([
       {
@@ -185,13 +175,14 @@ const web = {
     new webpack.IgnorePlugin(/dist/), // used in common/*.js
     new webpack.IgnorePlugin(/require-from-string/), // used in common/locales.js
     new webpack.HashedModuleIdsPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].[contenthash:8].css'
+    new ExtractTextPlugin({
+      filename: '[name].[hash:8].css'
     }),
     new VersionPlugin(),
     new ManifestPlugin() // used by server side to resolve hashed assets
   ],
   devServer: {
+    before: require('./server/bin/dev'),
     compress: true,
     hot: false,
     host: '0.0.0.0',
@@ -205,19 +196,16 @@ const web = {
   }
 };
 
-module.exports = () => {
-  //(env, argv) => {
-  // TODO: why are styles not output in 'production' mode?
-  const mode = 'development'; //argv.mode || 'production';
+module.exports = (env, argv) => {
+  const mode = argv.mode || 'production';
   console.error(`mode: ${mode}`);
   web.mode = serviceWorker.mode = mode;
   if (mode === 'development') {
     // istanbul instruments the source for code coverage
     webJsOptions.plugins.push('istanbul');
-    web.devServer.before = require('./server/bin/dev');
     web.entry.tests = ['./test/frontend/index.js'];
-    web.devtool = 'inline-source-map';
-    serviceWorker.devtool = 'inline-source-map';
+    web.devtool = 'source-map';
+    serviceWorker.devtool = 'source-map';
   }
-  return [serviceWorker, web];
+  return [web, serviceWorker];
 };