From c8e3ffd019a9c5bd54e33cbfe0c6d2607c3151a0 Mon Sep 17 00:00:00 2001 From: Romain Beaumont Date: Sat, 6 Mar 2021 01:29:28 +0100 Subject: [PATCH] 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) --- .github/workflows/ci.yml | 2 ++ README.md | 31 +++++++++++++------------- package.json | 17 ++++++++------ server.js | 17 ++++++++++++-- webpack.config.js => webpack.common.js | 26 +++++---------------- webpack.dev.js | 19 ++++++++++++++++ webpack.prod.js | 15 +++++++++++++ 7 files changed, 82 insertions(+), 45 deletions(-) rename webpack.config.js => webpack.common.js (81%) create mode 100644 webpack.dev.js create mode 100644 webpack.prod.js diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d4521a55..a136576e 100644 --- a/.github/workflows/ci.yml +++ b/.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 ./* diff --git a/README.md b/README.md index 5d457ff2..f3781172 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index e7f41457..8afeb40e 100644 --- a/package.json +++ b/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" } } diff --git a/server.js b/server.js index 48a385fa..d819e481 100644 --- a/server.js +++ b/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 () { diff --git a/webpack.config.js b/webpack.common.js similarity index 81% rename from webpack.config.js rename to webpack.common.js index 7b178efe..d390387c 100644 --- a/webpack.config.js +++ b/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 diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 00000000..debb0939 --- /dev/null +++ b/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/ + } + } +}) diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 00000000..5c00efb2 --- /dev/null +++ b/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() + ] +})