faster dev build (mineflayer in new webpack config)

Author: michaljaz

README.md

@@ -17,7 +17,7 @@ Live demo with no installation: https://minecraft.js.org.
 npm install
 npm start
 ```
-This will start express and webpack in development mode: whenever you save a file, the build will be redone (it takes 2s), and you can refresh the page to get the new result.
+This will start express and webpack in development mode: whenever you save a file, the build will be redone (it takes 3s), and you can refresh the page to get the new result.
 
 Connect to http://localhost:8080 in your browser. Also specify correct server ip in url param.
 

index.js

@@ -1,10 +1,12 @@
 const { app } = require('./lib/server.js')
 const helmet = require('helmet')
 const middleware = require('webpack-dev-middleware')
-const devconfig = require('./src/webpack.dev.js')
+const config = require('./src/webpack.dev.js')
+const path = require('path')
 const compression = require('compression')
 const webpack = require('webpack')
-const compiler = webpack(devconfig)
+
+const compiler = webpack(config)
 
 app.use(compression())
 app.use(helmet({ contentSecurityPolicy: false }))

package-lock.json

@@ -13,7 +13,7 @@ class Game {
       console.log('Running in development mode')
     }
     this.fov = {
-      normal: 70,
+      normal: 60,
       sprint: 80
     }
     this.al = new AssetLoader()

src/scripts/index.js

@@ -1,8 +1,7 @@
 process.versions.node = '14.0.0'
 global.Buffer = global.Buffer || require('buffer').Buffer
-const mineflayer = function (protocol, proxyHost, proxyPort, botConfig) {
+
+export default function (protocol, proxyHost, proxyPort, botConfig) {
   require('net').setProxy({ hostname: proxyHost, port: proxyPort, protocol })
   return require('mineflayer').createBot(botConfig)
 }
-
-export { mineflayer }

src/scripts/proxy/mineflayer.js src/scripts/mineflayer.jssrc/scripts/proxy/mineflayer.js renamed to src/scripts/mineflayer.js

@@ -2,8 +2,9 @@
 import vec3 from 'vec3'
 import Convert from 'ansi-to-html'
 import { antiXSS } from './../additional/tools.js'
-import { mineflayer } from './mineflayer.js'
 const convert = new Convert()
+importScripts('./mineflayer.js')
+mineflayer = mineflayer.default
 
 global.window = self
 let bot = null

src/scripts/proxy/Proxy.worker.js

@@ -4,7 +4,10 @@ const path = require('path')
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const webpack = require('webpack')
 
-module.exports = {
+const config1 = {
+  optimization: {
+    runtimeChunk: 'single'
+  },
   entry: {
     main: path.join(__dirname, 'scripts/index.js'),
     bootstrap: [path.join(__dirname, 'styles/style.scss'), 'bootstrap']
@@ -18,32 +21,6 @@ module.exports = {
     maxEntrypointSize: 1.5e6,
     maxAssetSize: 1.5e6
   },
-  resolve: {
-    alias: {
-      'minecraft-protocol': path.resolve(__dirname, '../node_modules/minecraft-protocol/src/index.js'),
-      express: false,
-      net: path.resolve(__dirname, 'vendor/browser.js'),
-      fs: 'memfs'
-    },
-    fallback: {
-      zlib: require.resolve('browserify-zlib'),
-      stream: require.resolve('stream-browserify'),
-      buffer: require.resolve('buffer/'),
-      events: require.resolve('events/'),
-      assert: require.resolve('assert/'),
-      crypto: require.resolve('crypto-browserify'),
-      path: require.resolve('path-browserify'),
-      constants: require.resolve('constants-browserify'),
-      os: require.resolve('os-browserify/browser'),
-      http: require.resolve('http-browserify'),
-      https: require.resolve('https-browserify'),
-      timers: require.resolve('timers-browserify'),
-      // fs: require.resolve("fs-memory/singleton"),
-      child_process: false,
-      perf_hooks: path.resolve(__dirname, 'vendor/perf_hooks_replacement.js'),
-      dns: path.resolve(__dirname, 'vendor/dns.js')
-    }
-  },
   module: {
     rules: [
       {
@@ -86,19 +63,12 @@ module.exports = {
     ]
   },
   plugins: [
-    new webpack.ProvidePlugin({
-      process: path.join(__dirname, '/vendor/process.js')
-    }),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.join(__dirname, '/html/index.html'),
       inject: 'head',
       favicon: path.join(__dirname, 'assets/images/favicon.png')
     }),
-
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer']
-    }),
     new LodashModuleReplacementPlugin(),
     new CopyPlugin({
       patterns: [
@@ -110,3 +80,52 @@ module.exports = {
     })
   ]
 }
+
+const config2 = {
+  entry: path.join(__dirname, 'scripts/mineflayer.js'),
+  output: {
+    library: 'mineflayer',
+    path: path.join(__dirname, 'dist'),
+    filename: 'mineflayer.js'
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 1.5e6,
+    maxAssetSize: 1.5e6
+  },
+  resolve: {
+    alias: {
+      'minecraft-protocol': path.resolve(__dirname, '../node_modules/minecraft-protocol/src/index.js'),
+      express: false,
+      net: path.resolve(__dirname, 'vendor/browser.js'),
+      fs: 'memfs'
+    },
+    fallback: {
+      zlib: require.resolve('browserify-zlib'),
+      stream: require.resolve('stream-browserify'),
+      buffer: require.resolve('buffer/'),
+      events: require.resolve('events/'),
+      assert: require.resolve('assert/'),
+      crypto: require.resolve('crypto-browserify'),
+      path: require.resolve('path-browserify'),
+      constants: require.resolve('constants-browserify'),
+      os: require.resolve('os-browserify/browser'),
+      http: require.resolve('http-browserify'),
+      https: require.resolve('https-browserify'),
+      timers: require.resolve('timers-browserify'),
+      child_process: false,
+      perf_hooks: path.resolve(__dirname, 'vendor/perf_hooks_replacement.js'),
+      dns: path.resolve(__dirname, 'vendor/dns.js'),
+      process: path.join(__dirname, 'vendor/process.js')
+    }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process',
+      Buffer: ['buffer', 'Buffer']
+    }),
+    new LodashModuleReplacementPlugin()
+  ]
+}
+
+module.exports = [config1, config2]

src/webpack.common.js

@@ -1,13 +1,19 @@
 const merge = require('webpack-merge')
-const common = require('./webpack.common.js')
+const [config1, config2] = require('./webpack.common.js')
 const webpack = require('webpack')
 
-module.exports = merge.merge(common, {
-  devtool: 'inline-source-map',
-  mode: 'development',
-  plugins: [
-    new webpack.DefinePlugin({
-      'window.PRODUCTION': JSON.stringify(false)
-    })
-  ]
-})
+module.exports = [
+  merge.merge(config1, {
+    devtool: 'inline-source-map',
+    mode: 'development',
+    plugins: [
+      new webpack.DefinePlugin({
+        'window.PRODUCTION': JSON.stringify(false)
+      })
+    ]
+  }),
+  merge.merge(config2, {
+    devtool: 'inline-source-map',
+    mode: 'development'
+  })
+]

src/webpack.dev.js

@@ -1,12 +1,17 @@
 const merge = require('webpack-merge')
-const common = require('./webpack.common.js')
+const [config1, config2] = require('./webpack.common.js')
 const webpack = require('webpack')
 
-module.exports = merge.merge(common, {
-  mode: 'production',
-  plugins: [
-    new webpack.DefinePlugin({
-      'window.PRODUCTION': JSON.stringify(true)
-    })
-  ]
-})
+module.exports = [
+  merge.merge(config1, {
+    mode: 'production',
+    plugins: [
+      new webpack.DefinePlugin({
+        'window.PRODUCTION': JSON.stringify(true)
+      })
+    ]
+  }),
+  merge.merge(config2, {
+    mode: 'production'
+  })
+]