refactor webpack config

README.md

@@ -8,9 +8,9 @@
 1. run `yarn` to install all dependencies.
 2. run `yarn watch CONFIG` to run a local build server that automatically builds
 your the mqtt control map for the given CONFIG everytime something changes.
-3. run `yarn build CONFIG` to create just a single build of the mqtt control map
+3. run `yarn dev CONFIG` to create just a single build of the mqtt control map
 for the given config.
-4. run `yarn production-build CONFIG` to generate all files for production use.
+4. run `yarn build CONFIG` to generate all files for production use.
 
 ## Config
 

config/rzl.js

@@ -697,7 +697,8 @@ const config : Config = {
     {
       image: require("../img/layers/rzl/labels.svg"),
       name: "Labels",
-      defaultVisibility: "visible",
+      defaultVisibility: "hidden",
+      opacity: 0.8,
       bounds: {
         topLeft: [0, 0],
         bottomRight: [1000, 700]

css/styles.css

@@ -5,6 +5,7 @@
 .leaflet-container {
   height: calc(100vh - 64px);
   max-height: 100%;
+  background: rgba(239,239,203,.59);
 }
 body {
   margin: 0;

package.json

@@ -4,9 +4,9 @@
   "author": "uwap <me+mqttmap.package.json@uwap.name>",
   "description": "control devices via mqtt on a beautiful map of your space",
   "scripts": {
-    "build": "webpack --bail --config webpack.dev.js --env",
+    "build": "webpack --bail --config webpack.config.js -p --env",
-    "production-build": "webpack --bail --config webpack.prod.js --env",
+    "dev": "webpack --bail --config webpack.config.js --mode development --env",
-    "watch": "webpack-dev-server --open --config webpack.dev.js --env",
+    "watch": "webpack-dev-server --open --config webpack.dev.js --mode development --env",
     "travis": "./travis.sh",
     "lint": "eslint -- --ext js --ext jsx src/",
     "precommit": "yarn lint"
@@ -15,7 +15,6 @@
     "@material-ui/core": "^1.2.1",
     "@material-ui/lab": "^1.0.0-alpha.5",
     "@mdi/font": "^2.0.46",
-    "babel-preset-env": "^1.6.0",
     "leaflet": "^1.3.1",
     "lodash-es": "^4.17.4",
     "mqtt": "^2.14.0",
@@ -32,24 +31,22 @@
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
     "clean-webpack-plugin": "^0.1.18",
     "css-loader": "^0.28.9",
     "eslint": "^4.16.0",
     "eslint-plugin-flowtype": "^2.42.0",
     "eslint-plugin-react": "^7.6.1",
-    "extract-text-webpack-plugin": "next",
     "file-loader": "^1.1.5",
     "flow": "^0.2.3",
     "flow-bin": "^0.70.0",
     "flow-typed": "^2.3.0",
     "html-webpack-plugin": "^3.1.0",
     "husky": "^0.14.3",
-    "lodash-webpack-plugin": "^0.11.4",
     "style-loader": "^0.21.0",
     "webpack": "^4.3.0",
     "webpack-cli": "^3.0.0",
     "webpack-dev-server": "^3.1.1",
-    "webpack-merge": "^4.1.1",
     "webpack-shell-plugin": "^0.5.0"
   },
   "license": "MIT"

travis.sh

@@ -5,7 +5,7 @@ for conf in $(ls config/); do
   if [ "$conf" = "utils.js" ]; then
     continue
   fi
+  yarn dev $conf
   yarn build $conf
-  yarn production-build $conf
   mv dist artifacts/$conf
 done

webpack.config.js

@@ -2,14 +2,24 @@ const path = require('path');
 const webpack = require('webpack');
 const WebpackShellPlugin = require('webpack-shell-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 const preBuildScripts = process.env.NO_FLOW == undefined ?
   process.env.FLOW_PATH != undefined ? [process.env.FLOW_PATH] : ['flow']
   : [];
 
-module.exports = {
+const configPath = env => {
+  if (env === true) {
+    throw "No config file was provided.";
+  }
+  return path.resolve(__dirname, `config/${env}`);
+};
+
+module.exports = env => ({
+  entry: {
+    main: [configPath(env),
+          path.resolve(__dirname, 'src/index.jsx')]
+  },
   resolve: {
     modules: [path.resolve(__dirname, "src"), "node_modules"],
     extensions: ['.js', '.jsx'],
@@ -23,7 +33,10 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.(woff2?|eot|ttf|svg)$/, loader: "file-loader" }
+      // TODO: CSS follow imports and minify + sourcemap on production
+      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
+      { test: /\.(woff2?|eot|ttf|svg)$/, loader: "file-loader" },
+      { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader?cacheDirectory=true" }
     ]
   },
   plugins: [
@@ -33,6 +46,5 @@ module.exports = {
       title: 'Space Map',
       template: 'index.ejs'
     }),
-    new ExtractTextPlugin("styles.css"),
   ]
-};
+});

webpack.dev.js

@@ -1,35 +0,0 @@
-const merge = require('webpack-merge');
-const path = require('path');
-const common = require('./webpack.common.js');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-const extractCSS = ExtractTextPlugin.extract({
-          fallback: "style-loader",
-          use: {
-            loader: "css-loader"
-          }
-        });
-
-const configPath = env => {
-  if (env === true) {
-    throw "No config file was provided.";
-  }
-  return path.resolve(__dirname, `config/${env}`);
-};
-
-module.exports = env => merge(common, {
-  entry: {
-    main: [configPath(env),
-          path.resolve(__dirname, 'src/index.jsx')]
-  },
-  module: {
-    rules: [
-      { test: /\.css$/, use: extractCSS },
-      { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader?cacheDirectory=true" }
-    ]
-  },
-  devtool: "eval-cheap-module-source-map",
-  devServer: {
-    contentBase: './dist'
-  },
-});

webpack.prod.js

@@ -1,49 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
-
-const extractCSS = ExtractTextPlugin.extract({
-          fallback: "style-loader",
-          use: {
-            loader: "css-loader",
-            options: {
-              sourceMap: true,
-              minimize: true
-            }
-          }
-        });
-
-const configPath = env => {
-  if (env === true) {
-    throw "No config file was provided.";
-  }
-  return path.resolve(__dirname, `config/${env}`);
-};
-
-module.exports = env => merge(common, {
-  entry: {
-    main: [configPath(env),
-          path.resolve(__dirname, 'src/index.jsx')],
-  },
-  module: {
-    rules: [
-      { test: /\.css$/, use: extractCSS },
-      { test: /\.js(x)?$/, exclude: /node_modules/, loader: "babel-loader" }
-    ]
-  },
-  devtool: "source-map",
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
- //   new LodashModuleReplacementPlugin(),
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.HashedModuleIdsPlugin(),
-    new webpack.optimize.AggressiveMergingPlugin()
-  ]
-});

yarn.lock

@@ -374,12 +374,6 @@ async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.4.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
-  dependencies:
-    lodash "^4.14.0"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2504,15 +2498,6 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-text-webpack-plugin@next:
-  version "4.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz#f7361d7ff430b42961f8d1321ba8c1757b5d4c42"
-  dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.4.5"
-    webpack-sources "^1.1.0"
-
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -2650,9 +2635,9 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-flow-bin@^0.69.0:
+flow-bin@^0.70.0:
-  version "0.69.0"
+  version "0.70.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.69.0.tgz#053159a684a6051fcbf0b71a2eb19a9679082da6"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.70.0.tgz#080ae83a997f2b4ddb3dc2649bf13336825292b5"
 
 flow-typed@^2.3.0:
   version "2.4.0"
@@ -3935,12 +3920,6 @@ lodash-es@^4.0.0, lodash-es@^4.17.4, lodash-es@^4.2.1:
   version "4.17.8"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.8.tgz#6fa8c8c5d337481df0bdf1c0d899d42473121e45"
 
-lodash-webpack-plugin@^0.11.4:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/lodash-webpack-plugin/-/lodash-webpack-plugin-0.11.4.tgz#6c3ecba3d4b8d24b53940b63542715c5ed3c4ac5"
-  dependencies:
-    lodash "^4.17.4"
-
 lodash.assign@^4.0.3, lodash.assign@^4.0.6:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -3957,7 +3936,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -6631,12 +6610,6 @@ webpack-log@^1.0.1, webpack-log@^1.1.2:
     loglevelnext "^1.0.1"
     uuid "^3.1.0"
 
-webpack-merge@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.2.tgz#5d372dddd3e1e5f8874f5bf5a8e929db09feb216"
-  dependencies:
-    lodash "^4.17.5"
-
 webpack-shell-plugin@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/webpack-shell-plugin/-/webpack-shell-plugin-0.5.0.tgz#29b8a1d80ddeae0ddb10e729667f728653c2c742"