got webpack production mode running

2018-07-13 11:13:09 -07:00 · 2018-07-13 11:13:09 -07:00 · 787d227761
parent 1a78f57515
commit 787d227761
7 changed files with 51 additions and 138 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,2 @@
+{
+}
--- a/app/fileReceiver.js
+++ b/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;
--- a/app/serviceWorker.js
+++ b/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
--- a/package-lock.json
+++ b/package-lock.json
@ -394,96 +394,6 @@
        "long": "3.2.0"
      }
    },
-    "@webpack-contrib/schema-utils": {
-      "version": "1.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz",
-      "integrity": "sha512-LonryJP+FxQQHsjGBi6W786TQB1Oym+agTpY0c+Kj8alnIw+DLUJb6SI8Y1GHGhLCH1yPRrucjObUmxNICQ1pg==",
-      "dev": true,
-      "requires": {
-        "ajv": "6.5.2",
-        "ajv-keywords": "3.2.0",
-        "chalk": "2.4.1",
-        "strip-ansi": "4.0.0",
-        "text-table": "0.2.0",
-        "webpack-log": "1.2.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.5.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz",
-          "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "2.0.1",
-            "fast-json-stable-stringify": "2.0.0",
-            "json-schema-traverse": "0.4.1",
-            "uri-js": "4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
-          "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
-          "dev": true
-        },
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "1.9.2"
-          }
-        },
-        "chalk": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
-          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "3.2.1",
-            "escape-string-regexp": "1.0.5",
-            "supports-color": "5.4.0"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "3.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-          "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-          "dev": true,
-          "requires": {
-            "has-flag": "3.0.0"
-          }
-        }
-      }
-    },
    "JSONStream": {
      "version": "0.8.4",
      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
@ -4588,6 +4498,29 @@
        "loader-utils": "1.1.0"
      }
    },
+    "extract-text-webpack-plugin": {
+      "version": "4.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
+      "integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.1",
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.5",
+        "webpack-sources": "1.1.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
+          "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
+          "dev": true,
+          "requires": {
+            "lodash": "4.17.10"
+          }
+        }
+      }
+    },
    "extract-zip": {
      "version": "1.6.7",
      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
@ -8007,17 +7940,6 @@
        "dom-walk": "0.1.1"
      }
    },
-    "mini-css-extract-plugin": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz",
-      "integrity": "sha512-XWuB3G61Rtasq/gLe7cp5cuozehE6hN+E4sxCamRR/WDiHTg+f7ZIAS024r8UJQffY+e2gGELXQZgQoFDfNDCg==",
-      "dev": true,
-      "requires": {
-        "@webpack-contrib/schema-utils": "1.0.0-beta.0",
-        "loader-utils": "1.1.0",
-        "webpack-sources": "1.1.0"
-      }
-    },
    "minimalistic-assert": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
--- a/package.json
+++ b/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",
--- a/server/layout.js
+++ b/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>
--- a/webpack.config.js
+++ b/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];
 };