New build

Remove placeholders and add real values to package.json
Recreate dependencies list in package.json
Update webpack and its dependencies
Changes Makefile to use newer webpack
Enhance webpack usages in Makefile
Prefer yarn then npm in Makefile
Update postcss

.gitignore

@@ -6,6 +6,8 @@ build/
 stats/*.dat
 npm-debug.log
 release.tar.gz
+package-lock.json
+yarn.lock
 
 # IntelliJ
 /.idea

Makefile

@@ -1,33 +1,26 @@
-# Does not work with BSD Make :(
 .PHONY: default setup prepare build build-css release
 default: dev
 
-UNAME := $(shell uname)
+# Default settings
 nodebin := node_modules/.bin
 main := src/Main.elm
 port := 8000
-server := $(nodebin)/webpack-dev-server --hot --inline --port $(port)
+
+# Automatic settings
+UNAME := $(shell uname)
+PATH := $(PATH):$(nodebin)
+JS_PACKAGE_MNGR := $(shell which yarn || which npm)
 
 ################################################################################
 # Setup
 ################################################################################
 
+# Prepare all dependencies
 setup:
-  ifeq ($(UNAME),FreeBSD)
-	rm -rf node_modules/elm-webpack-loader
-  endif
 	git submodule init
 	git submodule update
-	npm install
+	$(JS_PACKAGE_MNGR) install
 	elm-package install -y
-  # FreeBSD compat hack
-  # Clone elm-webpack-loader, remove `elm` from deps and then `npm install` it.
-  ifeq ($(UNAME),FreeBSD)
-	mkdir node_modules/elm-webpack-loader
-	cp -r /usr/local/elm/elm-webpack-loader/* node_modules/elm-webpack-loader
-  endif
-  # ??? not sure why some bins aren't installed as executable
-  # this seems to be only on the FreeBSD build server
 	chmod +x node_modules/.bin/* stats/*.sh
 
 ################################################################################
@@ -36,70 +29,80 @@ setup:
 
 list_instances = ps ax | grep -E "(elm\-make|webpack\-dev\-server)" | grep -v grep
 
+# Compile-once
 compile:
   ifneq ($(shell $(list_instances)),)
 	$(error Probably already building)
   endif
 	(elm-make $(main) && rm -f index.html && ./stats/succeedBuild.sh) || \
 		(./stats/increaseFailedBuilds.sh && false)
 
+# Keep compiling
 compile-loop:
 	-while :; do $(MAKE) compile; sleep 2; done
 
 ################################################################################
 # Build
 ################################################################################
 
+# Clean build enviroment
 prepare:
-	rm -rf build/ && mkdir -p build/
+	rm -rf build/ && \
+	mkdir -p build/
 
+# Update index.html and compile css
 build: prepare
-	cat static/index.html > build/index.html
-	$(nodebin)/elm-css src/Core/Stylesheets.elm -o static/css
+	cat static/index.html | touch build/index.html
+	elm-css src/Core/Stylesheets.elm -o static/css
 
+#  Add CSS hot-reloader
 build-css: prepare
 	awk '/\<\/body/ \
 	  {print \
 	    "\<script type\=\"text\/javascript\" src\=\"vendor\/cssrefresh\.js\"\> \
 	    \<\/script\> \
 	  "}1' \
 	  static/index.html > build/index.html
-	$(nodebin)/elm-css src/Core/Stylesheets.elm -o static/css
+	elm-css src/Core/Stylesheets.elm -o static/css
 
+# Creates release.tar.gz
 release: build
-	npm run build
-	tar -zcf release.tar.gz build/ && mv release.tar.gz build/
+	webpack
+	tar -zcf release.tar.gz build/ && \
+	mv release.tar.gz build/
 
 ################################################################################
 # Dev
 ################################################################################
 
-# For dev, first we compile the whole app, and only then we run npm.
-# The rationale is simple: `npm start` will compile with debug and warn
-# flags, which makes the whole step much slower. Compiling first without
-# them ensures the "bulk" of the job is done quickly, and only then we
-# add the debug flags. There is little difference when only a couple
-# of changes are made, but it makes everything much faster when the
-# whole app, with dependencies, need to be built. This usually happens
-# when adding dependencies, changing branches etc.
+# For dev, first we compile the whole app, and only then we watch.
 dev: compile build watch
 
 # Add annoying css hot reloader. Useful when editing styles.
 dev-css: compile build-css watch
 
-# Start webpack
+# Starts webpack server with inline & hot-reload
 watch:
   ifneq ($(shell $(list_instances)),)
 	$(error Probably already running)
   endif
-	npm start
+	webpack-dev-server \
+		--progress \
+		--cache false \
+		--port $(port)
 
 ################################################################################
 # Tools
 ################################################################################
 
-server:
-	$(server)
+# Starts webpack server without inline nor hot-reload
+host:
+	webpack-dev-server \
+		--progress \
+		--cache false \
+		--inline false \
+		--hot false \
+		--port $(port)
 
 lint:
 	elm-format --validate src/
@@ -109,7 +112,7 @@ lint:
 ################################################################################
 
 test:
-	$(nodebin)/elm-test
+	elm-test
 
 test-quick:
 	sed 's/10/1/g' tests/Config.elm > tests/Config.elm.tmp && \
@@ -132,7 +135,6 @@ test-loop:
 
 clean:
 	rm -rf build/* && \
-	rm -f *.html && \
-	rm -f release.tar.gz && \
+	rm -f *.html release.tar.gz && \
 	git clean -id && \
 	git checkout tests/Config.elm

package.json

@@ -1,54 +1,32 @@
 {
-  "name": "elm-webpack-starter",
-  "description": "Webpack setup for writing Elm apps",
-  "version": "0.8.4",
-  "license": "MIT",
-  "author": "Peter Morawiec",
+  "name": "heborn",
+  "description": "Web client for Hacker Experience 1",
+  "version": "0.0.1",
+  "license": "AGPL-3.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/moarwick/elm-webpack-starter"
-  },
-  "watch": {
-    "elm-css": {
-      "patterns": [
-        "src/OS/Style.elm",
-        "src/OS/*/Style.elm",
-        "src/Apps/*/Style.elm",
-        "src/Core/Style.elm",
-        "src/Core/Stylesheets.elm"
-      ],
-      "extensions": "elm"
-    }
-  },
-  "scripts": {
-    "start": "webpack-dev-server --hot --inline --port 8000 & npm run watch",
-    "build": "webpack",
-    "reinstall": "npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install",
-    "watch": "npm-watch",
-    "elm-css": "sleep 4 && elm-css src/Core/Stylesheets.elm -o build/css/",
-    "comment": "sleep 4 on elm-css is required so there is no conflict/slow-down on compilation time"
-  },
-  "devDependencies": {
-    "autoprefixer": "^6.3.6",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.26.1",
-    "elm-hot-loader": "^0.5.4",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.17.0",
-    "postcss-loader": "^1.1.1",
-    "rimraf": "^2.5.2",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-merge": "^2.4.0",
-    "elm-css": "^0.6.0"
+    "url": "https://github.com/hackerexperience/heborn"
   },
   "dependencies": {
-    "elm-test": "0.18.2",
-    "leaflet": "^1.1.0",
+    "autoprefixer": "^7.2.1",
+    "copy-webpack-plugin": "^4.2.3",
+    "css-loader": "^0.28.7",
+    "elm": "^0.18.0",
+    "elm-css": "^0.6.1",
+    "elm-format": "^0.6.1-alpha",
+    "elm-hot-loader": "^0.5.4",
+    "elm-test": "^0.18.11",
+    "elm-webpack-loader": "^4.4.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.5",
+    "html-webpack-plugin": "^2.30.1",
+    "leaflet": "^1.2.0",
     "npm-watch": "^0.1.8",
-    "webpack-dev-server": "^1.16.3"
+    "postcss-loader": "^2.0.9",
+    "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.5",
+    "webpack-merge": "^4.1.1"
   }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = ({ file, options, env }) => ({
+  plugins: {
+    'autoprefixer': { browsers: ['last 2 versions'] },
+  }
+})

webpack.config.js

@@ -28,7 +28,7 @@ var commonConfig = {
   },
 
   resolve: {
-    extensions: ['', '.js', '.elm', '.css', '.png', '.jpg'],
+    extensions: ['.js', '.elm', '.css', '.png', '.jpg'],
     alias: {
         leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css",
         leaflet_js: __dirname + "/node_modules/leaflet/dist/leaflet.js"
@@ -51,7 +51,7 @@ var commonConfig = {
       },
       {
         test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "file?publicPath=../&name=fonts/[name].[ext]"
+        loader: "file-loader?publicPath=../&name=fonts/[name].[ext]"
       },
       {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
@@ -63,10 +63,11 @@ var commonConfig = {
       },
       {
         test: /\.(css|scss)$/,
-        loader: ExtractTextPlugin.extract( 'style-loader', [
+        use: [
+          'style-loader',
           'css-loader',
-          'postcss-loader',
-        ])
+          'postcss-loader'
+        ]
       }
     ]
   },
@@ -82,8 +83,6 @@ var commonConfig = {
     )
   ],
 
-  postcss: [ autoprefixer( { browsers: ['last 2 versions'] } ) ]
-
 };
 
 // additional webpack settings for local env (when invoked by 'npm start')
@@ -102,7 +101,7 @@ if ( TARGET_ENV === 'development' ) {
         {
           test:    /\.elm$/,
           exclude: [/elm-stuff/, /node_modules/],
-          loader:  'elm-hot!elm-webpack?verbose=true&warn=true&debug=true'
+          loader:  'elm-hot-loader!elm-webpack-loader?verbose=true&warn=true&debug=true'
         }
       ]
     },
@@ -125,7 +124,7 @@ if ( TARGET_ENV === 'production' ) {
         {
           test:    /\.elm$/,
           exclude: [/elm-stuff/, /node_modules/],
-          loader:  'elm-webpack'
+          loader:  'elm-webpack-loader'
         }
       ]
     },