webpack-dev-middleware easier development setup

Author: michaljaz

coffee/client/js/index.coffee

@@ -31,13 +31,11 @@ class Game
 		@canvas=document.querySelector "#c"
 		@pcanvas=document.querySelector "#c_player"
 		@dimension=null
+		@socket=io()
 		if PRODUCTION
 			console.log "Running in production mode"
-			@socket=io()
 		else
 			console.log "Running in development mode"
-			@socket=io.connect ":8081"
-
 		@renderer=new THREE.WebGLRenderer
 			canvas:@canvas
 			PixelRatio:window.devicePixelRatio

coffee/client/webpack.common.coffee

@@ -3,12 +3,13 @@ WebpackBar=require "webpackbar"
 UglifyJsPlugin=require "uglifyjs-webpack-plugin"
 HtmlWebpackPlugin = require "html-webpack-plugin"
 CopyPlugin = require "copy-webpack-plugin"
+webpack=require "webpack"
 LodashModuleReplacementPlugin = require 'lodash-webpack-plugin'
 module.exports=
 	stats:"detailed"
 	performance:
 		hints: false
-	entry: './js/index.js'
+	entry: "#{__dirname}/js/index.js"
 	output:
 		path: "#{__dirname}/dist"
 		filename: '[contenthash].js'
@@ -27,15 +28,15 @@ module.exports=
 	plugins:[
 		new HtmlWebpackPlugin({
 			filename: "index.html"
-			template: "./static/html/index.html"
+			template: "#{__dirname}/static/html/index.html"
 			inject: "head"
 		})
 		new LodashModuleReplacementPlugin()
 		new WebpackBar()
 		new CopyPlugin({
 			patterns: [
-				{ from: "static/assets", to: "assets" }
-				{ from: "static/css", to: "css" }
+				{ from: "#{__dirname}/static/assets", to: "assets" }
+				{ from: "#{__dirname}/static/css", to: "css" }
 			]
 		})
 	]

coffee/client/webpack.dev.coffee

@@ -1,13 +1,10 @@
 
 merge=require "webpack-merge"
-common=require "./webpack.common.js"
+common=require "#{__dirname}/webpack.common.js"
 webpack=require "webpack"
 module.exports=merge.merge common,
 	devtool: 'inline-source-map'
 	mode: "development"
-	devServer:
-		contentBase: "#{__dirname}/public"
-		port: 8080
 	plugins:[
 		new webpack.DefinePlugin {
 			PRODUCTION: JSON.stringify(false)

coffee/client/webpack.prod.coffee

@@ -1,6 +1,6 @@
 
 merge=require "webpack-merge"
-common=require "./webpack.common.js"
+common=require "#{__dirname}/webpack.common.js"
 webpack=require "webpack"
 module.exports=merge.merge common,
 	devtool: 'source-map'

coffee/server/server.coffee

@@ -14,16 +14,18 @@ module.exports=(mode)->
 	vec3=require "vec3"
 	Convert = require 'ansi-to-html'
 	convert = new Convert()
-
 	#początkowe zmienne
 	sf={}
 	socketInfo={}
-
+	port=process.env.PORT || 8080
 	if mode is "production"
-		port=process.env.PORT || 8080
 		app.use express.static "#{__dirname}/../client/dist"
 	else
-		port=8081
+		webpack = require "webpack"
+		middleware = require "webpack-dev-middleware"
+		devconfig=require "#{__dirname}/../client/webpack.dev"
+		compiler = webpack devconfig
+		app.use middleware(compiler)
 
 	#Konfiguracja serwera express
 	server.listen port,()->

docs/README.md

@@ -27,12 +27,9 @@ npm install
 #Coffeescript transpilation (In TERMINAL 1)
 npm run coffee
 
-#Start development webpack server (In TERMINAL 2)
+#Start node server with webpack middleware (In TERMINAL 2)
 npm run dev
 
-#Start node server (In TERMINAL 3)
-npm run start-dev
-
 ```
 
 #### Production setup

package-lock.json

@@ -2,10 +2,9 @@
   "name": "web-minecraft",
   "version": "1.0.0",
   "scripts": {
-		"start-dev": "node src/server/serverDevelopment",
     "start": "node src/server/serverProduction",
     "coffee": "coffee -o src/ -cw coffee/",
-    "dev": "npm run prebuild && cd src/client && webpack serve --open --config webpack.dev.js",
+    "dev": "npm run prebuild && node src/server/serverDevelopment",
     "build": "cd src/client && webpack --config webpack.prod.js",
     "prebuild": "node src/server/prebuild",
     "clean": "rimraf src/client/dist/*"
@@ -48,6 +47,7 @@
     "copy-webpack-plugin": "^6.3.1",
     "webpack": "^5.9.0",
     "webpack-cli": "^4.2.0",
+    "webpack-hot-middleware": "^2.25.0",
     "webpack-node-externals": "^2.5.2"
   }
 }