refactor: webpack configuration (#398)

* refactor: webpack configuration

* feat: webpack hot reloading

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

package-lock.json

@@ -11409,6 +11409,15 @@
         "uuid": "^3.3.2"
       }
     },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",

package.json

@@ -7,12 +7,11 @@
     "url": "https://github.com/standardnotes/web"
   },
   "scripts": {
-    "start": "webpack-dev-server --progress",
-    "watch": "webpack --mode development -w",
-    "bundle": "webpack --mode production",
+    "start": "webpack-dev-server --progress --config webpack.dev.js",
+    "watch": "webpack -w --config webpack.dev.js",
+    "bundle": "webpack --config webpack.prod.js",
     "build": "bundle install && npm install && npm run bundle",
     "submodules": "git submodule update --init --force --remote",
-    "test": "karma start karma.conf.js --single-run",
     "lint": "eslint --fix app/assets/javascripts/**/*.js",
     "tsc": "tsc --project app/assets/javascripts/tsconfig.json"
   },
@@ -50,6 +49,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "file-loader": "^5.1.0",
+    "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.9.0",
     "mocha": "^7.1.0",
     "ng-cache-loader": "0.0.26",
@@ -58,14 +58,14 @@
     "pug-loader": "^2.4.0",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.14.1",
-    "snjs": "github:standardnotes/snjs#0c306de70c5afffe16096424c6c3326eaa1dd4fd",
     "sn-stylekit": "2.0.22",
+    "snjs": "github:standardnotes/snjs#0c306de70c5afffe16096424c6c3326eaa1dd4fd",
     "ts-loader": "^6.2.2",
     "typescript": "^3.8.3",
     "typescript-eslint": "0.0.1-alpha.0",
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
-    "lodash": "^4.17.15"
+    "webpack-merge": "^4.2.2"
   }
 }

webpack.config.js

@@ -2,20 +2,12 @@ const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+
 module.exports = {
   entry: './app/assets/javascripts/index.ts',
   output: {
     filename: './javascripts/app.js'
   },
-  devServer: {
-    proxy: {
-      '/extensions': {
-        target: 'http://localhost:3001',
-        pathRewrite: { '^/extensions': '/public/extensions' }
-      }
-    },
-    port: 3001
-  },
   plugins: [
     new webpack.DefinePlugin({
       __VERSION__: JSON.stringify(require('./package.json').version)
@@ -27,10 +19,9 @@ module.exports = {
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       filename: './stylesheets/app.css',
-      ignoreOrder: false // Enable to remove warnings about conflicting order
+      ignoreOrder: true // Enable to remove warnings about conflicting order
     })
   ],
-  devtool: 'source-map',
   resolve: {
     extensions: ['.ts', '.js'],
     alias: {

webpack.dev.js

@@ -0,0 +1,17 @@
+const merge = require('webpack-merge');
+const config = require('./webpack.config.js');
+
+module.exports = merge(config, {
+  mode: 'development',
+  devtool: 'source-map',
+  devServer: {
+    publicPath: '/dist/',
+    proxy: {
+      '/extensions': {
+        target: 'http://localhost:3001',
+        pathRewrite: { '^/extensions': '/public/extensions' }
+      }
+    },
+    port: 3001
+  }
+});

webpack.prod.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge');
+const config = require('./webpack.config.js');
+
+module.exports = merge(config, {
+  mode: 'production'
+});