Update to Webpack 5 (fixes crypto error on build) (#738)

* Updating react-number-editor dependency from stale named branch * Remove references to deprecated react-addons-perf package * Issue #25 Webpack updated to current version, many dependencies updated, Babel & Webpack configs updated. Add dev & prod Dockerfiles and update README with Docker instructions Created webpack.common.js. Coriolis-data now specified as github dependency * Bump bugfix versions of react & react-dom only * Workbox dependency upgrade for webpack 5 compat * Stab at upgrading workbox dep Far more fatal webpack errors :( * Automate reinstall/rebuild with npm script * Working build again w updated deps Disabled/commented out all bugsnag references Added production-like Docker build for troubleshooting issues that don't appear in dev server * Remove deprecated @babel/polyfill import & dependency * Fix to service worker to v5 of workbox and align with webpack 5 plugin * Disabling recent round of polyfills. Don't think they're necessary. * Whitespace in package.json * Add Buffer as Webpack plugin. Fix indenting. Fix deprecated call to Buffer. * Remove bugsnag and deprecated babel code that was commented out, per convo with Felix --------- Co-authored-by: Sam Clayton <sam@goranku.com>
2025-12-08 14:33:22 +00:00 · 2023-03-01 12:55:23 -08:00
parent 93adcb3daf
commit 875af31ffe
21 changed files with 3899 additions and 28079 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -7,6 +7,8 @@
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
@@ -28,7 +30,7 @@
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
-    "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
  ]
 }
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+.gitignore
+README.md
+
+build
+node_modules
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set, in order to prevent line ending inconsistency.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.jsx text
+*.js text
+
+# Declare files that will always have CRLF line endings on checkout.
+# *.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
--- a/25
+++ b/25
@@ -0,0 +1,25 @@
+#syntax=docker/dockerfile:1.4
+# Run this from within this directory. Change the location of coriolis-data repo and image name/tag as needed.
+# docker buildx build --build-context data=../coriolis-data --tag coriolis .
+
+FROM node:18-alpine
+
+# TODO: For a production build, we may want to just build the bundle and copy that in. No need for local copy of source.
+WORKDIR /app
+ADD . .
+COPY --from=data . /coriolis-data/
+
+# Git is required before install if any modules (like coriolis-data) are loaded from github
+RUN apk update
+RUN apk add git
+
+WORKDIR /app/coriolis-data
+RUN npm install
+WORKDIR /app
+RUN npm install
+# Bundle for production config with webpack & log
+RUN npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)
+
+# Optimally, this will start a static asset server like nginx/apache. Currently, this will start dev webpack server.
+CMD ["npm", "start"]
+EXPOSE 3300
--- a/23
+++ b/23
@@ -0,0 +1,23 @@
+#syntax=docker/dockerfile:1.4
+# Run this from within this directory. Change the location of coriolis-data repo and image name/tag as needed.
+# docker buildx build --build-context data=../coriolis-data --tag coriolis -f ./Dockerfile-dev .
+
+FROM node:18-alpine
+
+WORKDIR /app
+ADD . .
+COPY --from=data . /coriolis-data/
+
+# Install git & any other desired in-container dev tools
+# Git is required before install if any modules (like coriolis-data) are loaded from github
+RUN apk update
+RUN apk add git
+
+WORKDIR /app/coriolis-data
+RUN npm install
+WORKDIR /app
+RUN npm install
+
+
+CMD ["npm", "start"]
+EXPOSE 3300
--- a/32
+++ b/32
@@ -0,0 +1,32 @@
+#syntax=docker/dockerfile:1.4
+# Run this from within this directory. Change the location of coriolis-data repo and image name/tag as needed.
+# docker buildx build --build-context data=../coriolis-data --tag coriolis:0.0.7-local-prod -f Dockerfile-local-prod .
+# docker run -d -p 80:8080 coriolis:0.0.7-local-prod
+
+FROM node:18-alpine
+
+# TODO: For a production build, we may want to just build the bundle and copy that in. No need for local copy of source.
+WORKDIR /app
+ADD . .
+# COPY --from=data . /coriolis-data/
+
+# Git is required before install if any modules (like coriolis-data is now referenced in the package.json) are loaded from github
+RUN apk update
+RUN apk add git
+
+# WORKDIR /app/coriolis-data
+# RUN npm install
+# WORKDIR /app
+# RUN npm install
+# Bundle for production config with webpack & log
+# In this version of the dockerfile, I'm deferring automated webpack build so I can monitor a manual build
+# RUN npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)
+
+RUN npm install -g http-server
+
+# Optimally, this will start a static asset server like nginx/apache. Currently, this will start dev webpack server.
+# CMD ["http-server", "/app/build", "-c-1"]
+CMD ["/bin/ash"]
+# CMD [""]
+
+EXPOSE 8080
--- a/README.md
+++ b/README.md
@@ -14,7 +14,16 @@ Coriolis was created using assets and imagery from Elite: Dangerous, with the pe

 ## Development

-To get a local instance of coriolis running, perform the following steps in a shell:
+This release includes the ability to run the app as a Docker container.
+```sh
+> git clone https://github.com/EDCD/coriolis.git
+> git clone https://github.com/EDCD/coriolis-data.git
+> cd coriolis
+> docker buildx build --build-context data=../coriolis-data --tag coriolis .
+> docker run -d -p 3300:3300 coriolis
+```
+
+Or to run an instance of coriolis without Docker Desktop, perform the following steps in a shell:
 ```sh
 > git clone https://github.com/EDCD/coriolis.git
 > git clone https://github.com/EDCD/coriolis-data.git
--- a/devServer.js
+++ b/devServer.js
@@ -3,24 +3,13 @@ var WebpackDevServer = require("webpack-dev-server");
 var config = require('./webpack.config.dev');

 new WebpackDevServer(webpack(config), {
-  publicPath: config.output.publicPath,
  hot: true,
-  disableHostCheck: true,
  headers: { "Access-Control-Allow-Origin": "*" },
  historyApiFallback: {
    rewrites: [
      // For some reason connect-history-api-fallback does not allow '.' in the URL for history fallback...
      { from: /\/outfit\//, to: '/index.html' }
    ]
-  },
-  stats: {
-    assets: true,
-    colors: true,
-    version: false,
-    hash: false,
-    timings: true,
-    chunks: false,
-    chunkModules: false
  }
 }).listen(3300, "0.0.0.0", function (err, result) {
  if (err) {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,14 +1,19 @@
 {
  "name": "coriolis_shipyard",
-  "version": "3.0.0",
+  "version": "3.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/EDCD/coriolis"
  },
  "homepage": "https://coriolis.io",
  "bugs": "https://github.com/EDCD/coriolis/issues",
+  "contributors": [
+    { "name": "cmdrmcdonald" },
+    { "name": "willb321" },
+    { "name": "felixlinker" }
+  ],
  "private": true,
-  "engine": "node >= 4.8.1",
+  "engine": "node >= 10.13.0",
  "license": "MIT",
  "scripts": {
    "extract-translations": "grep -hroE \"(translate\\('[^']+'\\))|(tip.bind\\(null, '[^']+')\" src/* | grep -oE \"'[^']+'\" | grep -oE \"[^']+\" | sort -u -f",
@@ -18,7 +23,8 @@
    "test": "jest",
    "prod-serve": "nginx -p $(pwd) -c nginx.conf",
    "prod-stop": "kill -QUIT $(cat nginx.pid)",
-    "build": "npm run clean && cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js",
+    "buildfresh": "rimraf node_modules && rm package-lock.json && npm install && npm run build > >(tee -a stdout.log) 2> >(tee -a stderr.log >&2)",
+    "build": "npm run clean && cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "rsync": "rsync -ae \"ssh -i $CORIOLIS_PEM\" --delete build/ $CORIOLIS_USER@$CORIOLIS_HOST:~/wwws",
    "deploy": "npm run lint && npm test && npm run build && npm run rsync"
  },
@@ -55,7 +61,7 @@
    ]
  },
  "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.20.12",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
@@ -74,15 +80,12 @@
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
-    "appcache-webpack-plugin": "^1.4.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
    "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^10.2.4",
    "create-react-class": "^15.6.3",
    "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^6.7.3",
    "d3-selection": "^1.3.2",
    "esdoc": "^1.1.0",
    "esdoc-custom-theme": "^1.4.2",
@@ -93,55 +96,66 @@
    "esdoc-standard-plugin": "^1.0.0",
    "eslint": "^5.6.0",
    "eslint-plugin-react": "^7.11.1",
-    "expose-loader": "^0.7.5",
-    "express": "^4.16.3",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^2.0.0",
-    "html-webpack-plugin": "^3.0.7",
-    "jest-cli": "^23.6.0",
-    "jsen": "^0.6.4",
+    "expose-loader": "^3.1.0",
+    "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jsen": "^0.6.6",
    "json-loader": "^0.5.4",
    "less": "^3.8.1",
-    "less-loader": "^4.1.0",
-    "react-addons-perf": "^15.4.2",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
    "react-container-dimensions": "^1.4.1",
    "react-testutils-additions": "^15.0.0",
    "react-transition-group": "^2.5.0",
-    "rimraf": "^2.6.1",
-    "rollup": "^0.66.2",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "style-loader": "^0.23.0",
-    "uglify-js": "^3.4.9",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.20.2",
-    "webpack-bugsnag-plugins": "^1.2.2",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.1.9",
-    "webpack-notifier": "^1.6.0",
-    "workbox-webpack-plugin": "^3.6.1"
+    "rimraf": "^4.1.2",
+    "rollup": "^3.17.2",
+    "style-loader": "^3.3.1",
+    "uglify-js": "^3.17.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0",
+    "webpack-notifier": "^1.15.0",
+    "workbox-cacheable-response": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-webpack-plugin": "^6.5.4"
  },
  "sideEffects": false,
  "dependencies": {
-    "@babel/polyfill": "^7.0.0",
+    "assert": "^1.5.0",
    "auto-bind": "^5.0.1",
    "base64url": "^3.0.1",
    "browserify-zlib-next": "^1.0.1",
+    "buffer": "^5.7.0",
    "classnames": "^2.2.6",
-    "coriolis-data": "../coriolis-data",
+    "constants-browserify": "^1.0.0",
+    "core-js": "^3.28.0",
+    "coriolis-data": "EDCD/coriolis-data",
+    "crypto-browserify": "^3.12.0",
    "d3": "^5.7.0",
    "detect-browser": "^3.0.1",
    "fbemitter": "^2.1.1",
+    "https-browserify": "^1.0.0",
    "lodash": "^4.17.11",
    "lz-string": "^1.4.4",
-    "pako": "^1.0.6",
+    "os-browserify": "^0.3.0",
+    "pako": "^2.1.0",
+    "path-browserify": "^1.0.1",
    "prop-types": "^15.6.2",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
    "react-fuzzy": "^0.5.2",
    "react-ga": "^2.5.3",
-    "react-number-editor": "Athanasius/react-number-editor.git#miggy",
+    "react-number-editor": "^4.0.3",
    "recharts": "^1.2.0",
-    "register-service-worker": "^1.5.2",
-    "superagent": "^3.8.3"
+    "register-service-worker": "^1.7.2",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "superagent": "^3.8.3",
+    "url": "^0.11.0",
+    "vm-browserify": "^1.1.2"
  }
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,4 @@
-import nodeResolve from "rollup-plugin-node-resolve";
+import nodeResolve from "@rollup/plugin-node-resolve";

 export default {
 	  entry: "d3-funcs.js",
--- a/src/.htaccess
+++ b/src/.htaccess
@@ -214,7 +214,7 @@ Options -MultiViews
    #       </Files>

    AddType application/x-web-app-manifest+json         webapp
-    AddType text/cache-manifest                         appcache manifest
+    # AddType text/cache-manifest                         appcache manifest

  # Media files
    AddType audio/mp4                                   f4a f4b m4a
--- a/src/app/Coriolis.jsx
+++ b/src/app/Coriolis.jsx
@@ -93,7 +93,7 @@ export default class Coriolis extends React.Component {
  _importBuild(r) {
    try {
      // Need to decode and gunzip the data, then build the ship
-      const data = zlib.inflate(new Buffer(r.params.data, 'base64'), { to: 'string' });
+      const data = zlib.inflate(new Buffer.from(r.params.data, 'base64'), { to: 'string' });
      const json = JSON.parse(data);
      console.info('Ship import data: ');
      console.info(json);
@@ -149,13 +149,6 @@ export default class Coriolis extends React.Component {
   */
  _onError(msg, scriptUrl, line, col, errObj) {
    console && console.error && console.error(arguments); // eslint-disable-line no-console
-    if (errObj) {
-      if (errObj instanceof Error) {
-        bugsnagClient.notify(errObj); // eslint-disable-line
-      } else if (errObj instanceof String) {
-        bugsnagClient.notify(msg, errObj); // eslint-disable-line
-      }
-    }
    this.setState({
      error: <ErrorDetails error={{ message: msg, details: { scriptUrl, line, col, error: JSON.stringify(errObj) } }}/>,
      page: null,
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,12 +1,6 @@
-import '@babel/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
 import '../less/app.less';
 import Coriolis from './Coriolis';
-// import TapEventPlugin from 'react/lib/TapEventPlugin';
-// import EventPluginHub from 'react/lib/EventPluginHub';
-
-// onTouchTap not ready for primetime yet, too many issues with preventing default
-// EventPluginHub.injection.injectEventPluginsByName({ TapEventPlugin });

 render(<Coriolis />, document.getElementById('coriolis'));
--- a/src/app/pages/OutfittingPage.jsx
+++ b/src/app/pages/OutfittingPage.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-// import Perf from 'react-addons-perf';
 import { Ships } from 'coriolis-data/dist';
 import cn from 'classnames';
 import Page from './Page';
@@ -58,7 +57,6 @@ export default class OutfittingPage extends Page {
   */
  constructor(props, context) {
    super(props, context);
-    // window.Perf = Perf;
    this.state = this._initState(props, context);
    this._keyDown = this._keyDown.bind(this);
    this._exportBuild = this._exportBuild.bind(this);
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -40,22 +40,12 @@
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
-
      gtag('config', 'UA-55840909-18');
    </script>
-
-
-
-    <!-- Bugsnag -->
-        <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.min.js"></script>
-        <script>
-      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
-      window.Bugsnag = window.bugsnagClient
-    </script>
  </head>
  <body style="background-color:#000;">
    <section id="coriolis">

    </section>
  </body>
-    </html>
+</html>
--- a/src/migrate.html
+++ b/src/migrate.html
@@ -24,12 +24,6 @@
      type="image/png"
      href="/192x192.png"
    />
-    <!-- Bugsnag -->
-    <script src="https://d2wy8f7a9ursnm.cloudfront.net/v5.0.0/bugsnag.min.js"></script>
-    <script>
-      window.bugsnagClient = bugsnag('ba9fae819372850fb660755341fa6ef5', {appVersion: window.BUGSNAG_VERSION || undefined})
-      window.Bugsnag = window.bugsnagClient
-    </script>

    <!-- Apple/iOS headers -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,46 +1,54 @@
+import {precacheAndRoute, createHandlerBoundToURL} from 'workbox-precaching';
+import {NavigationRoute, registerRoute} from 'workbox-routing';
+import {StaleWhileRevalidate, CacheFirst} from 'workbox-strategies';
+import {CacheableResponsePlugin} from 'workbox-cacheable-response'
+import {ExpirationPlugin} from 'workbox-expiration';
+
 console.log('Hello from sw.js');

-if (workbox) {
-  console.log('Yay! Workbox is loaded 🎉');
-  workbox.precaching.precacheAndRoute(self.__precacheManifest);
+// See https://developer.chrome.com/docs/workbox/migration/migrate-from-v4/ for guide to changes made
+console.log('Yay! Workbox is loaded 🎉');
+precacheAndRoute(self.__WB_MANIFEST || []);

-  workbox.routing.registerNavigationRoute('/index.html');
+const handler = createHandlerBoundToURL('/index.html');
+const navigationRoute = new NavigationRoute(handler
+  // , {allowlist: [...], denylist: [...],}
+);
+registerRoute(navigationRoute);

-  workbox.routing.registerRoute(
+
+registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
-    new workbox.strategies.CacheFirst({
+  new CacheFirst({
    plugins: [
-        new workbox.cacheableResponse.Plugin({
+      new CacheableResponsePlugin({
        statuses: [0, 200]
      })
    ]
  })
-  );
+);

-  workbox.routing.registerRoute(
+registerRoute(
  /\.(?:js|css)$/,
-    new workbox.strategies.StaleWhileRevalidate({
+  new StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
-  );
+);

-  workbox.routing.registerRoute(
+registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
-    new workbox.strategies.CacheFirst({
+  new CacheFirst({
    cacheName: 'google-fonts',
    plugins: [
-        new workbox.expiration.Plugin({
+      new ExpirationPlugin({
        maxEntries: 30
      }),
-        new workbox.cacheableResponse.Plugin({
+      new CacheableResponsePlugin({
        statuses: [0, 200]
      })
    ]
  })
-  );
-} else {
-  console.log('Boo! Workbox didn\'t load 😬');
-}
+);

 self.addEventListener('message', event => {
  if (!event.data) {
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -0,0 +1,81 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const pkgJson = require('./package');
+const buildDate = new Date();
+
+module.exports = {
+  entry: {
+    main: './src/app/index.js'
+  },
+  resolve: {
+    // When requiring, you don't need to add these extensions
+    extensions: ['.js', '.jsx', '.json', '.less'],
+    fallback: {
+      // Consider replacing brwoserify-zlib-next c. 2016 package with pako, which it's just a wrapper for
+      /* Some of these polyfills may not even be necessary, and were added in an attempt to deal with build issues
+            while upgrading to Webpack v5 */
+      "zlib": require.resolve("browserify-zlib-next"),
+      "assert": require.resolve("assert/"),
+      "buffer": require.resolve("buffer/"),
+      "stream": require.resolve("stream-browserify"),
+      /*
+      "url": require.resolve("url/"),
+      "path": require.resolve("path-browserify"),
+      "crypto": require.resolve("crypto-browserify"),
+      "os": require.resolve("os-browserify/browser"),
+      "https": require.resolve("https-browserify"),
+      "http": require.resolve("stream-http"),
+      "vm": require.resolve("vm-browserify"),
+      "constants": require.resolve("constants-browserify"),
+      // "fs": false
+      */
+    }
+  },
+  optimization: {
+    usedExports: true
+  },
+  output: {
+    path: path.join(__dirname, 'build'),
+    chunkFilename: '[name].bundle.js',
+    // assetModuleFilename: '[contenthash][ext]',
+    publicPath: '/',
+    clean: true // we already do rimraf on the build dir, but this should obviate that
+  },
+  plugins: [
+    // new webpack.optimize.CommonsChunkPlugin({
+    //   name: 'lib',
+    //   filename: 'lib.js'
+    // }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.join(__dirname, 'src/index.ejs'),
+      version: pkgJson.version,
+      // gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
+      date: buildDate,
+    }),
+    new MiniCssExtractPlugin({
+        filename: 'app.css',
+    }),
+    // Solve missing Buffer polyfill that breaks module engineering
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
+  module: {
+    rules: [
+      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader' ]},
+      {
+        test: /\.less$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ]
+      },
+      { test: /\.(js|jsx)$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
+      {
+        test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
+        type: 'asset/resource',
+      },
+    ]
+  }
+};
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -1,69 +1,27 @@
-const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const WebpackNotifierPlugin = require('webpack-notifier');
-const pkgJson = require('./package');
-const buildDate = new Date();
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');

-module.exports = {
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const WebpackNotifierPlugin = require('webpack-notifier');
+
+module.exports = merge(common, {
  devtool: 'source-map',
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' }
  },
  mode: 'development',
-  entry: {
-    main: './src/app/index.js',
-  },
-  resolve: {
-    // When requiring, you don't need to add these extensions
-    extensions: ['.js', '.jsx', '.json', '.less']
-  },
  optimization: {
    minimize: false,
-    usedExports: true
-  },
-  output: {
-    path: path.join(__dirname, 'build'),
-    chunkFilename: '[name].bundle.js',
-    publicPath: '/'
  },
  plugins: [
-    new CopyWebpackPlugin(['src/.htaccess', 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
-    // new webpack.optimize.CommonsChunkPlugin({
-    //   name: 'lib',
-    //   filename: 'lib.js'
-    // }),
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: path.join(__dirname, 'src/index.ejs'),
-      version: pkgJson.version,
-      date: buildDate,
-      gapiKey: process.env.CORIOLIS_GAPI_KEY || ''
-    }),
-    new ExtractTextPlugin({
-      filename: 'app.css',
-      disable: false,
-      allChunks: true
-    }),
+    new CopyWebpackPlugin({
+      patterns: [
+      'src/.htaccess', 
+      'src/iframe.html', 
+      'src/xdLocalStoragePostMessageApi.min.js'
+    ]}),
    new WebpackNotifierPlugin({ alwaysNotify: true }),
-    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
-  ],
-  module: {
-    rules: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
-      {
-        test: /\.less$/,
-        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' })
-      },
-      { test: /\.(js|jsx)$/, loaders: ['babel-loader'], include: path.join(__dirname, 'src') },
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
  ]
-  }
-};
+});
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -1,54 +1,37 @@
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const { InjectManifest } = require('workbox-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { BugsnagSourceMapUploaderPlugin, BugsnagBuildReporterPlugin } = require('webpack-bugsnag-plugins');
-const pkgJson = require('./package');
-const buildDate = new Date();
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');

-module.exports = {
-  devtool: 'source-map',
-  entry: {
-    main: './src/app/index.js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.json', '.less']
-  },
-  output: {
-    path: path.join(__dirname, 'build'),
-    chunkFilename: '[name].bundle.js',
-    publicPath: '/',
-    globalObject: 'this'
-  },
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
+
+module.exports = merge(common, {
+  // devtool: 'source-map',
  mode: 'production',
  optimization: {
    minimize: true,
-    usedExports: true
+  },
+  output: {
+    globalObject: 'this'
  },
  plugins: [
-    new CopyWebpackPlugin(['src/.htaccess', { from: 'src/schemas', to: 'schemas' }, {
+    new CopyWebpackPlugin({
+      patterns: [
+        'src/.htaccess', 
+        'src/iframe.html', 
+        'src/xdLocalStoragePostMessageApi.min.js',  
+        { from: 'src/schemas', to: 'schemas' },
+        {
          from: 'src/images/logo/*',
-      flatten: true,
-      to: ''
-    }, 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
-    // new webpack.optimize.CommonsChunkPlugin({
-    //  name: 'lib',
-    //  filename: 'lib.[chunkhash:6].js'
-    // }),
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: path.join(__dirname, 'src/index.ejs'),
-      uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
-      gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
-      date: buildDate,
-      version: pkgJson.version
-    }),
-    new ExtractTextPlugin({
-      filename: '[hash:6].css',
-      disable: false,
-      allChunks: true
+          to: '[name][ext]'
+        }
+    ]}),
+    /* new HtmlWebpackPlugin({
+      // uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
+    }), */
+    new MiniCssExtractPlugin({
+      filename: '[contenthash:6].css',
    }),
    // new BugsnagBuildReporterPlugin({
    //   apiKey: 'ba9fae819372850fb660755341fa6ef5',
@@ -59,25 +42,11 @@ module.exports = {
    //   overwrite: true,
    //   appVersion: `${pkgJson.version}-${buildDate.toISOString()}`
    // }),
+    
    new InjectManifest({
      swSrc: './src/sw.js',
-      importWorkboxFrom: 'cdn',
      swDest: 'service-worker.js'
    }),
-  ],
-  module: {
-    rules: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
-      {
-        test: /\.less$/,
-        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' })
-      },
-      { test: /\.(js|jsx)$/, loader: 'babel-loader?cacheDirectory=true', include: path.join(__dirname, 'src') },
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
+    
  ]
-  }
-};
+});