From c91074ad91345321f34bcd0181e28b419d11d858 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Thu, 12 Mar 2020 22:19:43 +0100
Subject: [PATCH] add watch-viewer npm task for faster build times
---
README.md | 2 +
package.json | 2 +
webpack.config.common.js | 117 +++++++++++++++++++++++++++++++++++++++
webpack.config.js | 96 ++------------------------------
webpack.config.viewer.js | 5 ++
5 files changed, 132 insertions(+), 90 deletions(-)
create mode 100644 webpack.config.common.js
create mode 100644 webpack.config.viewer.js
diff --git a/README.md b/README.md
index 9514503e0..81f984ce1 100644
--- a/README.md
+++ b/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
diff --git a/package.json b/package.json
index 9e977e2df..0342a9370 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.common.js b/webpack.config.common.js
new file mode 100644
index 000000000..1e86cb95b
--- /dev/null
+++ b/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'),
+// ]
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 9e9aceeac..4111dfc44 100644
--- a/webpack.config.js
+++ b/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'),
diff --git a/webpack.config.viewer.js b/webpack.config.viewer.js
new file mode 100644
index 000000000..7286ed61a
--- /dev/null
+++ b/webpack.config.viewer.js
@@ -0,0 +1,5 @@
+const common = require('./webpack.config.common.js');
+const createApp = common.createApp;
+module.exports = [
+ createApp('viewer')
+]
\ No newline at end of file
--
GitLab