Optimize webpack usage, fix #34 (#58)

* introduce prod/dev build https://webpack.js.org/guides/production/
* use it properly with express https://webpack.js.org/guides/development/#using-webpack-dev-middleware
to provide a fast npm start (5 second)

Author: rom1504

.github/workflows/ci.yml

@@ -22,6 +22,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
+    - run: npm run build
     - run: npm test
   DeployPages:
     runs-on: ubuntu-latest
@@ -37,6 +38,7 @@ jobs:
       - name: Build
         run: |
           npm install
+          npm run build
           cp -R public/ ../
           git checkout -b gh-pages
           rm -Rf ./*

README.md

@@ -4,25 +4,23 @@
 [![Discord](https://img.shields.io/badge/chat-on%20discord-brightgreen.svg)](https://discord.gg/GsEFRM8)
 [![Try it on gitpod](https://img.shields.io/badge/try-on%20gitpod-brightgreen.svg)](https://gitpod.io/#https://github.com/PrismarineJS/prismarine-web-client)
 
-### A Minecraft client running in a web page. **Live demo at https://prismarine.js.org/prismarine-web-client/**
-
+A Minecraft client running in a web page. **Live demo at https://prismarine.js.org/prismarine-web-client/**
 
 
 ## How it Works
-prismarine-web-client runs mineflayer and prismarine-viewer in the browser, which connects over WebSocket to a proxy which translates the WebSocket connection into TCP to connect to normal Minecraft servers.
+prismarine-web-client runs mineflayer and prismarine-viewer in the browser, which connects over WebSocket to a proxy 
+which translates the WebSocket connection into TCP to connect to normal Minecraft servers.
 
 ## Screenshot
 ![Screenshot of prismarine-web-client in action](screenshot.png)
 
 ## Live Demo
-Click on this link to open it in your browser, no installation necessary: https://prismarine-web-client.js.org
+Click on this link to open it in your browser, no installation necessary: https://prismarine.js.org/prismarine-web-client
 
 *Tested on Chrome & Firefox for desktop platforms.*
 
-## Usage (for self-hosted installations)
-If you want the latest version or want to use auth, you can host an instance yourself.
-
-Run these commands in bash: 
+## Usage
+To host it yourself, run these commands in bash: 
 ```bash
 $ npm install -g prismarine-web-client
 $ prismarine-web-client
@@ -31,20 +29,16 @@ Finally, open `http://localhost:8080` in your browser.
 
 ## Features
 
-* Display mobs (though sometimes messed up)
-* Display players
-* Display other entities as colored rectangles
+* Display mobs and players
 * Display blocks 
 * Movement (you can move, and you see entities moving live)
 * Place and break blocks
 
 ## Roadmap
 * Containers (inventory, chests, etc.)
-* More Customisation (e.g. mouse sensitivity, text size, issue #40)
 * Sounds
 * More World Interactions (attacking entities, etc.)
 * Cosmetic Rendering Features (day night cycle, fog, etc.)
-* Server-Side Support Plugins (for auth bypass & possibly hosting its own websocket proxy to reduce latency, issue #13)
 
 ## Development
 
@@ -61,10 +55,17 @@ Finally, run
 
 ```bash
 $ npm install
-$ npm run build-start
+$ npm start
 ```
 
-Then connect to http://localhost:8080 in your browser.
+This will start express and webpack in development mode: whenever you save a file, the build will be redone (it takes 5s), 
+and you can refresh the page to get the new result.
+
+Connect to http://localhost:8080 in your browser.
+
+You may want to disable auto saving in your IDE to avoid constant rebuilding, see https://webpack.js.org/guides/development/#adjusting-your-text-editor
 
+To check the production build (take a minute to build), you can run `npm run build-start`
 
+If you're interested in contributing, you can check projects at https://github.com/PrismarineJS/prismarine-web-client/projects
 

package.json

@@ -4,11 +4,12 @@
   "description": "A minecraft client running in a browser",
   "main": "index.js",
   "scripts": {
-    "prepare": "webpack",
-    "start": "webpack serve",
+    "build": "webpack --config webpack.prod.js",
+    "dev-build": "webpack --config webpack.dev.js",
+    "start": "node server.js 8080 dev",
     "prod-start": "node server.js",
-    "build-start": "npm run prepare && npm run prod-start",
-    "public-start": "npm run prepare && node server.js 80",
+    "build-start": "npm run build && npm run prod-start",
+    "prepublishOnly": "npm run build",
     "lint": "standard",
     "fix": "standard --fix",
     "test": "npm run lint && mocha"
@@ -41,8 +42,8 @@
   "homepage": "https://github.com/PrismarineJS/prismarine-web-client#readme",
   "dependencies": {
     "compression": "^1.7.4",
-    "express": "^4.17.1",
-    "net-browserify": "PrismarineJS/net-browserify"
+    "net-browserify": "PrismarineJS/net-browserify",
+    "express": "^4.17.1"
   },
   "devDependencies": {
     "assert": "^2.0.0",
@@ -70,6 +71,8 @@
     "timers-browserify": "^2.0.12",
     "webpack": "^5.11.0",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-middleware": "^3.7.3",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.7.3"
   }
 }

server.js

@@ -10,8 +10,21 @@ const app = express()
 
 app.use(compression())
 app.use(netApi({ allowOrigin: '*' }))
-app.use(express.static(path.join(__dirname, './public')))
-app.use(express.json({ limit: '100kb' }))
+if (process.argv[3] === 'dev') {
+  // https://webpack.js.org/guides/development/#using-webpack-dev-middleware
+  const webpackDevMiddleware = require('webpack-dev-middleware')
+  const config = require('./webpack.dev.js')
+  const webpack = require('webpack')
+  const compiler = webpack(config)
+
+  app.use(
+    webpackDevMiddleware(compiler, {
+      publicPath: config.output.publicPath
+    })
+  )
+} else {
+  app.use(express.static(path.join(__dirname, './public')))
+}
 
 // Start the server
 const server = app.listen(process.argv[2] === undefined ? 8080 : process.argv[2], function () {

webpack.config.js renamed to webpack.common.js

@@ -1,17 +1,14 @@
 const webpack = require('webpack')
 const path = require('path')
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+// https://webpack.js.org/guides/production/
 
 const config = {
-  // devtool: 'inline-source-map',
-  // mode: 'development',
-  mode: 'production',
   entry: path.resolve(__dirname, './index.js'),
   output: {
     path: path.resolve(__dirname, './public'),
-    filename: './index.js'
+    filename: './index.js',
+    publicPath: '/'
   },
   resolve: {
     alias: {
@@ -44,7 +41,6 @@ const config = {
   },
   plugins: [
     // fix "process is not defined" error:
-    new CleanWebpackPlugin(),
     new webpack.ProvidePlugin({
       process: 'process/browser'
     }),
@@ -67,20 +63,8 @@ const config = {
         { from: path.join(__dirname, 'assets/mojangles.ttf'), to: './' },
         { from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' }
       ]
-    }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new LodashModuleReplacementPlugin()
-  ],
-  devServer: {
-    contentBase: path.resolve(__dirname, './public'),
-    compress: true,
-    inline: true,
-    // open: true,
-    hot: true,
-    watchOptions: {
-      ignored: /node_modules/
-    }
-  }
+    })
+  ]
 }
 
 module.exports = config

webpack.dev.js

@@ -0,0 +1,19 @@
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
+const path = require('path')
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  cache: true,
+  devServer: {
+    contentBase: path.resolve(__dirname, './public'),
+    compress: true,
+    inline: true,
+    // open: true,
+    hot: true,
+    watchOptions: {
+      ignored: /node_modules/
+    }
+  }
+})

webpack.prod.js

@@ -0,0 +1,15 @@
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const webpack = require('webpack')
+
+module.exports = merge(common, {
+  mode: 'production',
+  plugins: [
+    new CleanWebpackPlugin(),
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new LodashModuleReplacementPlugin()
+  ]
+})