add watch-viewer npm task for faster build times

README.md

@@ -62,6 +62,8 @@ This project builds on experience from previous solutions:
 ### Build automatically on file save:
     npm run watch
 
+If working on just the viewer, ``npm run watch-viewer`` will provide shorter compile times.
+
 ### Build with debug mode enabled:
     DEBUG=molstar npm run watch
 

package.json

@@ -18,9 +18,11 @@
     "build-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,ico}\" lib/",
     "build-webpack": "webpack --mode production",
     "watch": "concurrently --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack\"",
+    "watch-viewer": "concurrently --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer\"",
     "watch-tsc": "tsc --watch --incremental",
     "watch-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,ico}\" lib/ --watch",
     "watch-webpack": "webpack -w --mode development --display minimal",
+    "watch-webpack-viewer": "webpack -w --mode development --display minimal --config ./webpack.config.viewer.js",
     "serve": "http-server -p 1338",
     "model-server": "node lib/servers/model/server.js",
     "model-server-watch": "nodemon --watch lib lib/servers/model/server.js",

webpack.config.common.js

@@ -0,0 +1,117 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// const CircularDependencyPlugin = require('circular-dependency-plugin');
+
+const sharedConfig = {
+    module: {
+        rules: [
+            {
+                test: /\.(woff2?|ttf|otf|eot|svg|html|ico)$/,
+                use: [{
+                    loader: 'file-loader',
+                    options: { name: '[name].[ext]' }
+                }]
+            },
+            {
+                test: /\.(s*)css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader', 'resolve-url-loader', 'sass-loader'
+                ]
+            }
+        ]
+    },
+    plugins: [
+        // new CircularDependencyPlugin({
+        //     include: [ path.resolve(__dirname, 'lib/') ],
+        //     failOnError: false,
+        //     cwd: process.cwd(),
+        // }),
+        new ExtraWatchWebpackPlugin({
+            files: [
+                './lib/**/*.scss',
+                './lib/**/*.html'
+            ],
+        }),
+        new webpack.DefinePlugin({
+            __PLUGIN_VERSION_TIMESTAMP__: webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true),
+            'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
+        }),
+        new MiniCssExtractPlugin({ filename: 'app.css' })
+    ],
+    resolve: {
+        modules: [
+            'node_modules',
+            path.resolve(__dirname, 'lib/')
+        ],
+    },
+    devtool: ''
+}
+
+
+function createEntry(src, outFolder, outFilename, isNode) {
+    return {
+        node: isNode ? void 0 : { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
+        target: isNode ? 'node' : void 0,
+        entry: path.resolve(__dirname, `lib/${src}.js`),
+        output: { filename: `${outFilename}.js`, path: path.resolve(__dirname, `build/${outFolder}`) },
+        ...sharedConfig
+    }
+}
+
+function createEntryPoint(name, dir, out) {
+    return {
+        node: { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
+        entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
+        output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
+        ...sharedConfig
+    }
+}
+
+function createNodeEntryPoint(name, dir, out) {
+    return {
+        target: 'node',
+        entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
+        output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
+        externals: {
+            argparse: 'require("argparse")',
+            'node-fetch': 'require("node-fetch")',
+            'util.promisify': 'require("util.promisify")',
+            xhr2: 'require("xhr2")',
+        },
+        ...sharedConfig
+    }
+}
+
+function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
+function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
+function createNodeApp(name) { return createNodeEntryPoint('index', `apps/${name}`, name) }
+
+module.exports = {
+    createApp,
+    createEntry,
+    createBrowserTest,
+    createNodeEntryPoint,
+    createNodeApp
+}
+
+// module.exports = [
+//     createApp('viewer'),
+//     // createApp('basic-wrapper'),
+//     // createEntry('examples/proteopedia-wrapper/index', 'examples/proteopedia-wrapper', 'index'),
+//     // createEntry('apps/demos/lighting/index', 'demos/lighting', 'index'),
+//     // createNodeApp('state-docs'),
+//     // createNodeEntryPoint('preprocess', 'servers/model', 'model-server'),
+//     // createApp('model-server-query'),
+
+//     // createBrowserTest('font-atlas'),
+//     // createBrowserTest('marching-cubes'),
+//     // createBrowserTest('render-lines'),
+//     // createBrowserTest('render-mesh'),
+//     // createBrowserTest('render-shape'),
+//     // createBrowserTest('render-spheres'),
+//     // createBrowserTest('render-structure'),
+//     // createBrowserTest('render-text'),
+// ]

webpack.config.js

@@ -1,93 +1,9 @@
-const path = require('path');
-const webpack = require('webpack');
-const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-// const CircularDependencyPlugin = require('circular-dependency-plugin');
-
-const sharedConfig = {
-    module: {
-        rules: [
-            {
-                test: /\.(woff2?|ttf|otf|eot|svg|html|ico)$/,
-                use: [{
-                    loader: 'file-loader',
-                    options: { name: '[name].[ext]' }
-                }]
-            },
-            {
-                test: /\.(s*)css$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader', 'resolve-url-loader', 'sass-loader'
-                ]
-            }
-        ]
-    },
-    plugins: [
-        // new CircularDependencyPlugin({
-        //     include: [ path.resolve(__dirname, 'lib/') ],
-        //     failOnError: false,
-        //     cwd: process.cwd(),
-        // }),
-        new ExtraWatchWebpackPlugin({
-            files: [
-                './lib/**/*.scss',
-                './lib/**/*.html'
-            ],
-        }),
-        new webpack.DefinePlugin({
-            __PLUGIN_VERSION_TIMESTAMP__: webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true),
-            'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
-        }),
-        new MiniCssExtractPlugin({ filename: 'app.css' })
-    ],
-    resolve: {
-        modules: [
-            'node_modules',
-            path.resolve(__dirname, 'lib/')
-        ],
-    },
-    devtool: ''
-}
-
-
-function createEntry(src, outFolder, outFilename, isNode) {
-    return {
-        node: isNode ? void 0 : { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
-        target: isNode ? 'node' : void 0,
-        entry: path.resolve(__dirname, `lib/${src}.js`),
-        output: { filename: `${outFilename}.js`, path: path.resolve(__dirname, `build/${outFolder}`) },
-        ...sharedConfig
-    }
-}
-
-function createEntryPoint(name, dir, out) {
-    return {
-        node: { fs: 'empty' }, // TODO find better solution? Currently used in file-handle.ts
-        entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
-        output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
-        ...sharedConfig
-    }
-}
-
-function createNodeEntryPoint(name, dir, out) {
-    return {
-        target: 'node',
-        entry: path.resolve(__dirname, `lib/${dir}/${name}.js`),
-        output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
-        externals: {
-            argparse: 'require("argparse")',
-            'node-fetch': 'require("node-fetch")',
-            'util.promisify': 'require("util.promisify")',
-            xhr2: 'require("xhr2")',
-        },
-        ...sharedConfig
-    }
-}
-
-function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
-function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
-function createNodeApp(name) { return createNodeEntryPoint('index', `apps/${name}`, name) }
+const common = require('./webpack.config.common.js');
+const createApp = common.createApp; 
+const createEntry = common.createEntry;
+const createBrowserTest = common.createBrowserTest;
+const createNodeEntryPoint = common.createNodeEntryPoint;
+const createNodeApp = common.createNodeApp;
 
 module.exports = [
     createApp('viewer'),

webpack.config.viewer.js

@@ -0,0 +1,5 @@
+const common = require('./webpack.config.common.js');
+const createApp = common.createApp;
+module.exports = [
+    createApp('viewer')
+]