Make dev builds faster (#227)

* Make SW generation prod-only

* Use SpeedMeasurePlugin

* Refactor: Symlink directories for dev builds

* Lint fix

* Remove SpeedMeasurePlugin

Author: Saiv46

webpack.common.js

@@ -1,8 +1,6 @@
 const webpack = require('webpack')
 const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const WorkboxPlugin = require('workbox-webpack-plugin')
 // https://webpack.js.org/guides/production/
 
 const config = {
@@ -57,26 +55,21 @@ const config = {
     new webpack.NormalModuleReplacementPlugin(
       /prismarine-viewer[/|\\]viewer[/|\\]lib[/|\\]utils/,
       './utils.web.js'
-    ),
-    new WorkboxPlugin.GenerateSW({
-      // these options encourage the ServiceWorkers to get in there fast
-      // and not allow any straggling "old" SWs to hang around
-      clientsClaim: true,
-      skipWaiting: true,
-      include: ['index.html', 'manifest.json'] // not caching a lot as anyway this works only online
-    }),
-    new CopyPlugin({
-      patterns: [
-        { from: path.join(__dirname, '/styles.css'), to: './styles.css' },
-        { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/blocksStates/'), to: './blocksStates/' },
-        { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' },
-        { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },
-        { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
-        { from: path.join(__dirname, 'assets/'), to: './' },
-        { from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' },
-        { from: path.join(__dirname, 'config.json'), to: './config.json' }
-      ]
-    })
+    )
+  ],
+  // The directories that can be optionally symlinked
+  [Symbol.for('webpack_directories')]: [
+    { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/blocksStates/'), to: './blocksStates/' },
+    { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' },
+    { from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' }
+  ],
+  // The files that will be copied
+  [Symbol.for('webpack_files')]: [
+    { from: path.join(__dirname, '/styles.css'), to: './styles.css' },
+    { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },
+    { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
+    { from: path.join(__dirname, 'assets/'), to: './' },
+    { from: path.join(__dirname, 'config.json'), to: './config.json' }
   ]
 }
 

webpack.dev.js

@@ -1,7 +1,36 @@
 const { merge } = require('webpack-merge')
 const common = require('./webpack.common.js')
+const CopyPlugin = require('copy-webpack-plugin')
+const fs = require('fs')
 const path = require('path')
 
+class SymlinkPlugin {
+  constructor (options) {
+    this.directories = options.directories ?? []
+  }
+
+  apply (compiler) {
+    compiler.hooks.afterEmit.tap(SymlinkPlugin.name, this.afterEmitHook.bind(this))
+  }
+
+  afterEmitHook (compilation) {
+    const dir = compilation.options.context
+    const output = compilation.outputOptions.path
+    for (const { from: _from, to: _to } of this.directories) {
+      const to = path.resolve(output, _to)
+      if (fs.existsSync(to)) {
+        try {
+          fs.unlinkSync(to)
+        } catch (e) {
+          continue
+        }
+      }
+      const from = path.resolve(dir, _from)
+      fs.symlinkSync(from, to, 'junction')
+    }
+  }
+}
+
 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
@@ -12,5 +41,9 @@ module.exports = merge(common, {
     inline: true,
     // open: true,
     hot: true
-  }
+  },
+  plugins: [
+    new CopyPlugin({ patterns: common[Symbol.for('webpack_files')] }),
+    new SymlinkPlugin({ directories: common[Symbol.for('webpack_directories')] })
+  ]
 })

webpack.prod.js

@@ -1,15 +1,30 @@
 const { merge } = require('webpack-merge')
 const common = require('./webpack.common.js')
 
+const CopyPlugin = require('copy-webpack-plugin')
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const webpack = require('webpack')
+const WorkboxPlugin = require('workbox-webpack-plugin')
 
 module.exports = merge(common, {
   mode: 'production',
   plugins: [
     new CleanWebpackPlugin(),
     new webpack.optimize.ModuleConcatenationPlugin(),
-    new LodashModuleReplacementPlugin()
+    new LodashModuleReplacementPlugin(),
+    new CopyPlugin({
+      patterns: [
+        ...common[Symbol.for('webpack_directories')],
+        ...common[Symbol.for('webpack_files')]
+      ]
+    }),
+    new WorkboxPlugin.GenerateSW({
+      // these options encourage the ServiceWorkers to get in there fast
+      // and not allow any straggling "old" SWs to hang around
+      clientsClaim: true,
+      skipWaiting: true,
+      include: ['index.html', 'manifest.json'] // not caching a lot as anyway this works only online
+    })
   ]
 })