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>

.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-private-methods", { "loose": true }],
-    "@babel/plugin-proposal-function-bind"
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
   ]
 }

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+.gitignore
+README.md
+
+build
+node_modules

.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

Dockerfile

@@ -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

Dockerfile-dev

@@ -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

Dockerfile-local-prod

@@ -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

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

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) {

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",
+    "@rollup/plugin-node-resolve": "^15.0.1",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
     "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",
+    "expose-loader": "^3.1.0",
-    "express": "^4.16.3",
+    "express": "^4.18.2",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "html-webpack-plugin": "^5.5.0",
-    "file-loader": "^2.0.0",
+    "jsen": "^0.6.6",
-    "html-webpack-plugin": "^3.0.7",
-    "jest-cli": "^23.6.0",
-    "jsen": "^0.6.4",
     "json-loader": "^0.5.4",
     "less": "^3.8.1",
-    "less-loader": "^4.1.0",
+    "less-loader": "^11.1.0",
-    "react-addons-perf": "^15.4.2",
+    "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",
+    "rimraf": "^4.1.2",
-    "rollup": "^0.66.2",
+    "rollup": "^3.17.2",
-    "rollup-plugin-node-resolve": "^3.4.0",
+    "style-loader": "^3.3.1",
-    "style-loader": "^0.23.0",
+    "uglify-js": "^3.17.4",
-    "uglify-js": "^3.4.9",
+    "webpack": "^5.75.0",
-    "url-loader": "^1.1.1",
+    "webpack-cli": "^5.0.1",
-    "webpack": "^4.20.2",
+    "webpack-dev-server": "^4.11.1",
-    "webpack-bugsnag-plugins": "^1.2.2",
+    "webpack-merge": "^5.8.0",
-    "webpack-cli": "^3.1.1",
+    "webpack-notifier": "^1.15.0",
-    "webpack-dev-server": "^3.1.9",
+    "workbox-cacheable-response": "^6.5.4",
-    "webpack-notifier": "^1.6.0",
+    "workbox-expiration": "^6.5.4",
-    "workbox-webpack-plugin": "^3.6.1"
+    "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": "^15.6.2",
-    "react-dom": "^15.5.4",
+    "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",
+    "register-service-worker": "^1.7.2",
-    "superagent": "^3.8.3"
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "superagent": "^3.8.3",
+    "url": "^0.11.0",
+    "vm-browserify": "^1.1.2"
   }
 }

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

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

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,

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

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

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>

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

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) {
+// See https://developer.chrome.com/docs/workbox/migration/migrate-from-v4/ for guide to changes made
-  console.log('Yay! Workbox is loaded 🎉');
+console.log('Yay! Workbox is loaded 🎉');
-  workbox.precaching.precacheAndRoute(self.__precacheManifest);
+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) {

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',
+      },
+    ]
+  }
+};

webpack.config.dev.js

@@ -1,69 +1,27 @@
-const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { merge } = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const common = require('./webpack.common.js');
-const WebpackNotifierPlugin = require('webpack-notifier');
-const pkgJson = require('./package');
-const buildDate = new Date();
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-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 CopyWebpackPlugin({
-    // new webpack.optimize.CommonsChunkPlugin({
+      patterns: [
-    //   name: 'lib',
+      'src/.htaccess', 
-    //   filename: 'lib.js'
+      'src/iframe.html', 
-    // }),
+      'src/xdLocalStoragePostMessageApi.min.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 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' }
   ]
-  }
+});
-};

webpack.config.prod.js

@@ -1,54 +1,37 @@
-const path = require('path');
+const { merge } = require('webpack-merge');
-const webpack = require('webpack');
+const common = require('./webpack.common.js');
-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();
 
-module.exports = {
+const path = require('path');
-  devtool: 'source-map',
+const CopyWebpackPlugin = require('copy-webpack-plugin');
-  entry: {
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-    main: './src/app/index.js'
+const { InjectManifest } = require('workbox-webpack-plugin');
-  },
+
-  resolve: {
+module.exports = merge(common, {
-    extensions: ['.js', '.jsx', '.json', '.less']
+  // devtool: 'source-map',
-  },
-  output: {
-    path: path.join(__dirname, 'build'),
-    chunkFilename: '[name].bundle.js',
-    publicPath: '/',
-    globalObject: 'this'
-  },
   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: '[name][ext]'
-      to: ''
+        }
-    }, 'src/iframe.html', 'src/xdLocalStoragePostMessageApi.min.js']),
+    ]}),
-    // new webpack.optimize.CommonsChunkPlugin({
+    /* new HtmlWebpackPlugin({
-    //  name: 'lib',
+      // uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
-    //  filename: 'lib.[chunkhash:6].js'
+    }), */
-    // }),
+    new MiniCssExtractPlugin({
-    new HtmlWebpackPlugin({
+      filename: '[contenthash:6].css',
-      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
     }),
     // 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' }
   ]
-  }
+});
-};