Upgrade webpack config and inline svg-s

2020-10-22 16:38:52 +02:00 · 2020-10-22 16:38:52 +02:00 · f1a2131540
commit f1a2131540
parent 81a8834c4d
14 changed files with 34437 additions and 218 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,3 +1,6 @@
 .dockerignore
 Dockerfile
 **/node_modules
+node_modules
+**/package-lock.json
+package-lock.json
--- a/11
+++ b/11
@ -1,15 +1,20 @@
 FROM node:14.13.0-alpine3.10 as build
+RUN npm install -g npm@7 

+WORKDIR /app
 COPY . .
-RUN npm i -g concurrently
-RUN yarn && yarn run build
+
+RUN npm install --legacy-peer-deps
+RUN npm run build


 FROM node:14.13.0-alpine3.10

+WORKDIR /app
+
 ENV NODE_ENV=production
 COPY backend/package.json .
-RUN npm i --production
+RUN npm install --production

 COPY --from=build backend/dist/main.js main.js 

--- a/backend/package.json
+++ b/backend/package.json
@ -6,7 +6,7 @@
  "author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
  "main": "dist/main.js",
  "bin": {
-    "declared-server": "./dist/main.js"
+    "declared-server": "dist/main.js"
  },
  "scripts": {
    "build": "npx webpack --mode production",
@ -17,15 +17,15 @@
    "@types/config": "0.0.36",
    "cors": "^2.8.5",
    "express": "^4.17.1",
+    "gl-matrix": "^3.3.0",
    "minimist": "^1.2.5",
    "socket.io": "^2.3.0",
-    "uws": "^10.148.1",
-    "gl-matrix": "^3.3.0"
+    "uws": "^10.148.1"
  },
  "devDependencies": {
-    "@types/minimist": "^1.2.0",
    "@types/cors": "^2.8.7",
    "@types/express": "^4.17.8",
+    "@types/minimist": "^1.2.0",
    "@types/node": "^14.11.2",
    "@types/socket.io": "^2.1.11",
    "@typescript-eslint/eslint-plugin": "^3.9.1",
@ -39,17 +39,16 @@
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-unused-imports": "^0.1.3",
    "file-loader": "^6.1.0",
-    "ts-loader": "^8.0.3",
    "nodemon": "^2.0.4",
-    "webpack-node-externals": "^2.5.2",
    "prettier": "^2.0.5",
    "raw-loader": "^4.0.1",
    "resolve-url-loader": "^3.1.1",
-    "shared": "0.0.0",
    "terser-webpack-plugin": "^2.3.5",
+    "ts-loader": "^8.0.3",
    "typescript": "^4.0.3",
    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-node-externals": "^2.5.2"
  }
 }
--- a/backend/tsconfig.json
+++ b/backend/tsconfig.json
@ -1,9 +1,7 @@
 {
  "compilerOptions": {
    "outDir": "dist",
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,
+    "skipLibCheck": true,
    "target": "es6",
    "esModuleInterop": true,
    "strict": true,
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -20,47 +20,30 @@
    "@types/socket.io-client": "^1.4.34",
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.9.1",
-    "autoprefixer": "^9.8.5",
    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.5.2",
-    "cssnano": "^4.1.10",
+    "common-config-webpack-plugin": "^2.0.1",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-json-format": "^2.0.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-unused-imports": "^0.1.3",
-    "file-loader": "^6.1.0",
    "firebase": "^7.22.0",
    "gl-matrix": "^3.3.0",
-    "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^6.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
+    "html-webpack-inline-svg-plugin": "^2.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "image-config-webpack-plugin": "^2.0.0",
    "prettier": "^2.0.5",
-    "raw-loader": "^4.0.1",
-    "resolve-url-loader": "^3.1.1",
-    "ts-loader": "^8.0.3",
-    "sass": "^1.26.3",
-    "sass-loader": "^9.0.2",
-    "sdf-2d": "^0.6.0",
-    "shared": "0.0.0",
    "resize-observer-polyfill": "^1.5.1",
+    "resolve-url-loader": "^3.1.1",
+    "scss-config-webpack-plugin": "^2.0.0",
+    "sdf-2d": "^0.6.0",
    "socket.io-client": "^2.3.1",
-    "source-map-loader": "^1.1.0",
-    "svg-url-loader": "^6.0.0",
-    "terser-webpack-plugin": "^4.2.2",
+    "source-map-loader": "^1.1.1",
+    "ts-config-webpack-plugin": "^2.0.0",
    "typescript": "^4.0.3",
    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    "webpack-dev-server": "^3.11.0"
  }
 }
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -50,20 +50,20 @@
      <section id="settings">
        <label for="enable-relative-movement">
          <input id="enable-relative-movement" type="checkbox" />
-          <img alt="a dashed circle" src="static/circle.svg" />
+          <img alt="a dashed circle" src="../static/circle.svg" />
        </label>

        <label for="enable-vibration">
          <input id="enable-vibration" type="checkbox" />
-          <img alt="vibrating mobile" src="static/vibrate.svg" />
+          <img alt="vibrating mobile" src="../static/vibrate.svg" />
        </label>

        <label for="enable-sounds">
          <input id="enable-sounds" type="checkbox" />
-          <img alt="speaker with sound waves" src="static/volume.svg" />
+          <img alt="speaker with sound waves" src="../static/volume.svg" />
        </label>

-        <img id="logout" alt="logout" src="static/logout.svg" />
+        <img id="logout" alt="logout" src="../static/logout.svg" />
      </section>
    </div>

@ -72,7 +72,7 @@
        id="toggle-settings"
        class="icon"
        alt="toggle-settings"
-        src="static/settings.svg"
+        src="../static/settings.svg"
      />
    </div>

@ -80,13 +80,13 @@
      class="full-screen-controllers"
      id="minimize"
      alt="minimize-application"
-      src="static/minimize.svg"
+      src="../static/minimize.svg"
    />
    <img
      class="full-screen-controllers"
      id="maximize"
      alt="maximize-application"
-      src="static/maximize.svg"
+      src="../static/maximize.svg"
    />
  </body>
 </html>
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@ -11,15 +11,12 @@ import { CharacterView } from './scripts/objects/character-view';
 import { LampView } from './scripts/objects/lamp-view';
 import { ProjectileView } from './scripts/objects/projectile-view';
 import { PlanetView } from './scripts/objects/planet-view';
-import './styles/main.scss';
+import './main.scss';
 import { LandingPageBackground } from './scripts/landing-page-background';
 import { JoinFormHandler } from './scripts/join-form-handler';
 import { handleFullScreen } from './scripts/handle-full-screen';
 import { Game } from './scripts/game';
 import { PlayerCharacterView } from './scripts/objects/player-character-view';
-import '../static/settings.svg';
-import '../static/minimize.svg';
-import '../static/maximize.svg';
 import { handleInsights } from './scripts/handle-insights';
 import { getInsightsFromRenderer } from './scripts/get-insights-from-renderer';
 import { Renderer } from 'sdf-2d';
@ -90,7 +87,6 @@ const toggleSettings = () =>

 const applyServerContainerShadows = () => {
  const { scrollHeight, clientHeight, scrollTop } = serverContainer;
-  console.log(scrollHeight, clientHeight, scrollTop);
  if (scrollHeight > clientHeight) {
    serverContainer.className = 'scroll';
    if (scrollTop === 0) {
--- a/frontend/src/styles/main.scss
+++ b/frontend/src/styles/main.scss
@ -1,8 +1,8 @@
-@import './vars.scss';
-@import './button.scss';
-@import './form.scss';
-@import './mixins.scss';
-@import './settings.scss';
+@import './styles/vars.scss';
+@import './styles/button.scss';
+@import './styles/form.scss';
+@import './styles/mixins.scss';
+@import './styles/settings.scss';

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');

@ -148,13 +148,14 @@ body {
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar {
      background-color: transparent;
-      width: 2px;
+      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: $accent;
      border-radius: $border-radius;
    }

+    transition: box-shadow $animation-time;
    &.scroll {
      box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4),
        inset 0 8px 8px -8px rgba(0, 0, 0, 0.4);
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@ -6,7 +6,6 @@
  position: absolute;
  display: flex;
  justify-content: center;
-
  top: 0;
  right: 0;
 }
@ -16,17 +15,17 @@
  cursor: pointer;

  #toggle-settings {
-    @include square($large-icon);
-    @media (max-width: $breakpoint) {
-      @include square($small-icon);
-    }
-
    animation: spin 32s linear infinite;
    @keyframes spin {
      100% {
        transform: rotate(360deg);
      }
    }
+
+    @include square($large-icon);
+    @media (max-width: $breakpoint) {
+      @include square($small-icon);
+    }
  }
 }

@ -59,10 +58,12 @@
    opacity: 1;
  }

-  img {
+  img,
+  svg {
    cursor: pointer;
    transition: opacity $animation-time;
    margin-bottom: $small-padding;
+    margin-left: 0;
    @include square($large-icon);
    @media (max-width: $breakpoint) {
      @include square($small-icon);
@ -73,7 +74,6 @@

  label {
    position: relative;
-  }

    input[type='checkbox'] {
      width: 0;
@ -81,7 +81,7 @@
      appearance: none;
      cursor: pointer;

-    &:not(:checked) + img {
+      &:not(:checked) + * {
        opacity: 0.4;
      }

@ -90,7 +90,7 @@
      }

      &:after {
-      content: ' ';
+        content: '';
        background: white;
        position: absolute;

@ -119,4 +119,5 @@
        }
      }
    }
+  }
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -7,8 +7,8 @@
    "experimentalDecorators": true,
    "downlevelIteration": true,
    "moduleResolution": "node",
+    "skipLibCheck": true,
    "module": "commonjs",
-    "composite": true,
    "lib": ["dom", "es2017"]
  },
  "include": ["src/**/*.ts", "src/*.ts"]
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@ -1,28 +1,10 @@
-const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
-const Sass = require('sass');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
+const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
+const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');

-const PATHS = {
-  entryPoint: path.resolve(__dirname, 'src/index.ts'),
-  bundles: path.resolve(__dirname, 'dist'),
-};
-
-module.exports = (env, argv) => ({
-  entry: {
-    index: PATHS.entryPoint,
-  },
-  target: 'web',
-  output: {
-    filename: '[name].js',
-    path: PATHS.bundles,
-  },
-  devtool: argv.mode === 'development' ? 'source-map' : false,
+module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true,
@ -30,94 +12,30 @@ module.exports = (env, argv) => ({
      poll: true,
    },
  },
-  optimization: {
-    minimize: argv.mode !== 'development',
-    minimizer: [
-      new TerserJSPlugin({
-        sourceMap: false,
-        test: /\.js$/,
-        exclude: /node_modules/,
-        terserOptions: {
-          keep_classnames: true,
-        },
-      }),
-      new OptimizeCSSAssetsPlugin({}),
-    ],
-  },
  plugins: [
+    // Cleans the dist folder before the build starts
+    new CleanWebpackPlugin(),
+    // Generate a base html file and injects all generated css and js files
    new HtmlWebpackPlugin({
-      xhtml: true,
      template: './src/index.html',
-      minify: {
-        collapseWhitespace: true,
-        removeComments: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true,
+    }),
+    new HtmlWebpackInlineSVGPlugin({
+      inlineAll: true,
+      svgoConfig: [
+        {
+          removeViewBox: false,
        },
-      inlineSource: '.(js|css)$',
-    }),
-    new HtmlWebpackInlineSourcePlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-    new CleanWebpackPlugin({
-      protectWebpackAssets: false,
-      cleanAfterEveryBuildPatterns: ['*', '!index.html', '!static*'],
+      ],
    }),
+    // SCSS Configuration for .css .module.css and .scss .module.scss files
+    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/scss-config-webpack-plugin/config
+    new ScssConfigWebpackPlugin(),
+    // Multi threading typescript loader configuration with caching for .ts and .tsx files
+    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/ts-config-webpack-plugin/config
+    new TsConfigWebpackPlugin(),
  ],
  module: {
    rules: [
-      {
-        test: /\.ico$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/',
-            name: '[name].[ext]',
-          },
-        },
-      },
-      {
-        test: /\.svg$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/static',
-            name: '[name].[ext]',
-          },
-        },
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'postcss-loader',
-          {
-            loader: 'resolve-url-loader',
-            options: {
-              keepQuery: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-              implementation: Sass,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.ts$/,
-        use: {
-          loader: 'ts-loader',
-        },
-        exclude: /node_modules/,
-      },
      {
        test: /\.js$/,
        enforce: 'pre',
@ -125,7 +43,4 @@ module.exports = (env, argv) => ({
      },
    ],
  },
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-});
+};
--- a/package.json
+++ b/package.json
@ -6,20 +6,17 @@
      "frontend",
      "shared",
      "backend"
-    ],
-    "nohoist": [
-      "**"
    ]
  },
  "devDependencies": {
    "concurrently": "^5.3.0"
  },
  "scripts": {
-    "build": "yarn workspace shared run build && yarn workspace decla.red-frontend run build && yarn workspace declared-server run build",
+    "build": "cd shared && npm run build && cd ../frontend && npm run build && cd ../backend && npm run build",
    "lint": "eslint './**/src/**/*.{js,ts,json}' --fix",
    "frontend": "yarn workspace decla.red-frontend start",
    "shared": "yarn workspace shared start",
    "backend": "yarn workspace declared-server start",
-    "start": "concurrently --kill-others-on-fail \"yarn frontend\"  \"yarn shared\"  \"yarn backend\""
+    "start": "concurrently --kill-others-on-fail \"cd shared && npm start\"  \"cd backend && npm start\"  \"cd frontend && npm start\""
  }
 }
--- a/shared/package.json
+++ b/shared/package.json
@ -29,6 +29,6 @@
    "ts-loader": "^8.0.3",
    "typescript": "^4.0.3",
    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.12"
  }
 }