init
This commit is contained in:
mario
35
platform/app/.webpack/rules/extractStyleChunks.js
Normal file
35
platform/app/.webpack/rules/extractStyleChunks.js
Normal file
@@ -0,0 +1,35 @@
|
||||
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
|
||||
|
||||
function extractStyleChunks(isProdBuild) {
|
||||
return [
|
||||
// If you are using the old stylus, you should uncomment this
|
||||
// {
|
||||
// test: /\.styl$/,
|
||||
// use: [
|
||||
// {
|
||||
// loader: ExtractCssChunksPlugin.loader,
|
||||
// options: {
|
||||
// hot: !isProdBuild,
|
||||
// },
|
||||
// },
|
||||
// { loader: 'css-loader' },
|
||||
// { loader: 'stylus-loader' },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
use: [
|
||||
{
|
||||
loader: ExtractCssChunksPlugin.loader,
|
||||
options: {
|
||||
hot: !isProdBuild,
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
'postcss-loader',
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
module.exports = extractStyleChunks;
|
||||
20
platform/app/.webpack/rules/fontsToJavaScript.js
Normal file
20
platform/app/.webpack/rules/fontsToJavaScript.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* For CommonJS, we want to bundle whatever font we've landed on. This allows
|
||||
* us to reduce the number of script-tags we need to specify for simple use.
|
||||
*
|
||||
* PWA will grab these externally to reduce bundle size (think code split),
|
||||
* and cache the grab using service-worker.
|
||||
*/
|
||||
const fontsToJavaScript = {
|
||||
test: /\.(ttf|eot|woff|woff2)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = fontsToJavaScript;
|
||||
210
platform/app/.webpack/webpack.pwa.js
Normal file
210
platform/app/.webpack/webpack.pwa.js
Normal file
@@ -0,0 +1,210 @@
|
||||
// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
|
||||
// ~~ WebPack
|
||||
const path = require('path');
|
||||
const { merge } = require('webpack-merge');
|
||||
const webpack = require('webpack');
|
||||
const webpackBase = require('./../../../.webpack/webpack.base.js');
|
||||
// ~~ Plugins
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { InjectManifest } = require('workbox-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
// ~~ Directories
|
||||
const SRC_DIR = path.join(__dirname, '../src');
|
||||
const DIST_DIR = path.join(__dirname, '../dist');
|
||||
const PUBLIC_DIR = path.join(__dirname, '../public');
|
||||
// ~~ Env Vars
|
||||
const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
|
||||
const PUBLIC_URL = process.env.PUBLIC_URL || '/';
|
||||
const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
|
||||
|
||||
// proxy settings
|
||||
const PROXY_TARGET = process.env.PROXY_TARGET;
|
||||
const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
|
||||
const PROXY_PATH_REWRITE_FROM = process.env.PROXY_PATH_REWRITE_FROM;
|
||||
const PROXY_PATH_REWRITE_TO = process.env.PROXY_PATH_REWRITE_TO;
|
||||
|
||||
const OHIF_PORT = Number(process.env.OHIF_PORT || 3000);
|
||||
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
|
||||
const Dotenv = require('dotenv-webpack');
|
||||
const writePluginImportFile = require('./writePluginImportsFile.js');
|
||||
// const MillionLint = require('@million/lint');
|
||||
|
||||
const copyPluginFromExtensions = writePluginImportFile(SRC_DIR, DIST_DIR);
|
||||
|
||||
const setHeaders = (res, path) => {
|
||||
if (path.indexOf('.gz') !== -1) {
|
||||
res.setHeader('Content-Encoding', 'gzip');
|
||||
} else if (path.indexOf('.br') !== -1) {
|
||||
res.setHeader('Content-Encoding', 'br');
|
||||
}
|
||||
if (path.indexOf('.pdf') !== -1) {
|
||||
res.setHeader('Content-Type', 'application/pdf');
|
||||
} else if (path.indexOf('mp4') !== -1) {
|
||||
res.setHeader('Content-Type', 'video/mp4');
|
||||
} else if (path.indexOf('frames') !== -1) {
|
||||
res.setHeader('Content-Type', 'multipart/related');
|
||||
} else {
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
|
||||
const isProdBuild = process.env.NODE_ENV === 'production';
|
||||
const hasProxy = PROXY_TARGET && PROXY_DOMAIN;
|
||||
|
||||
const mergedConfig = merge(baseConfig, {
|
||||
entry: {
|
||||
app: ENTRY_TARGET,
|
||||
},
|
||||
output: {
|
||||
path: DIST_DIR,
|
||||
filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
|
||||
publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
|
||||
devtoolModuleFilenameTemplate: function (info) {
|
||||
if (isProdBuild) {
|
||||
return `webpack:///${info.resourcePath}`;
|
||||
} else {
|
||||
return 'file:///' + encodeURI(info.absoluteResourcePath);
|
||||
}
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
modules: [
|
||||
// Modules specific to this package
|
||||
path.resolve(__dirname, '../node_modules'),
|
||||
// Hoisted Yarn Workspace Modules
|
||||
path.resolve(__dirname, '../../../node_modules'),
|
||||
SRC_DIR,
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
// For debugging re-renders
|
||||
// MillionLint.webpack(),
|
||||
new Dotenv(),
|
||||
// Clean output.path
|
||||
new CleanWebpackPlugin(),
|
||||
// Copy "Public" Folder to Dist
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
...copyPluginFromExtensions,
|
||||
{
|
||||
from: PUBLIC_DIR,
|
||||
to: DIST_DIR,
|
||||
toType: 'dir',
|
||||
globOptions: {
|
||||
// Ignore our HtmlWebpackPlugin template file
|
||||
// Ignore our configuration files
|
||||
ignore: ['**/config/**', '**/html-templates/**', '.DS_Store'],
|
||||
},
|
||||
},
|
||||
// Short term solution to make sure GCloud config is available in output
|
||||
// for our docker implementation
|
||||
{
|
||||
from: `${PUBLIC_DIR}/config/google.js`,
|
||||
to: `${DIST_DIR}/google.js`,
|
||||
},
|
||||
// Copy over and rename our target app config file
|
||||
{
|
||||
from: `${PUBLIC_DIR}/${APP_CONFIG}`,
|
||||
to: `${DIST_DIR}/app-config.js`,
|
||||
},
|
||||
// Copy Dicom Microscopy Viewer build files
|
||||
{
|
||||
from: '../../../node_modules/dicom-microscopy-viewer/dist/dynamic-import',
|
||||
to: DIST_DIR,
|
||||
globOptions: {
|
||||
ignore: ['**/*.min.js.map'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
// Generate "index.html" w/ correct includes/imports
|
||||
new HtmlWebpackPlugin({
|
||||
template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
|
||||
filename: 'index.html',
|
||||
templateParameters: {
|
||||
PUBLIC_URL: PUBLIC_URL,
|
||||
},
|
||||
}),
|
||||
// Generate a service worker for fast local loads
|
||||
new InjectManifest({
|
||||
swDest: 'sw.js',
|
||||
swSrc: path.join(SRC_DIR, 'service-worker.js'),
|
||||
// Increase the limit to 4mb:
|
||||
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
|
||||
// Need to exclude the theme as it is updated independently
|
||||
exclude: [/theme/],
|
||||
// Cache large files for the manifests to avoid warning messages
|
||||
maximumFileSizeToCacheInBytes: 1024 * 1024 * 50,
|
||||
}),
|
||||
],
|
||||
// https://webpack.js.org/configuration/dev-server/
|
||||
devServer: {
|
||||
// gzip compression of everything served
|
||||
// Causes Cypress: `wait-on` issue in CI
|
||||
// compress: true,
|
||||
// http2: true,
|
||||
// https: true,
|
||||
open: true,
|
||||
port: OHIF_PORT,
|
||||
client: {
|
||||
overlay: { errors: true, warnings: false },
|
||||
},
|
||||
proxy: {
|
||||
'/dicomweb': 'http://localhost:5000',
|
||||
},
|
||||
static: [
|
||||
{
|
||||
directory: '../../testdata',
|
||||
staticOptions: {
|
||||
extensions: ['gz', 'br', 'mht'],
|
||||
index: ['index.json.gz', 'index.mht.gz'],
|
||||
redirect: true,
|
||||
setHeaders,
|
||||
},
|
||||
publicPath: '/viewer-testdata',
|
||||
},
|
||||
],
|
||||
//public: 'http://localhost:' + 3000,
|
||||
//writeToDisk: true,
|
||||
historyApiFallback: {
|
||||
disableDotRule: true,
|
||||
index: PUBLIC_URL + 'index.html',
|
||||
},
|
||||
headers: {
|
||||
'Cross-Origin-Embedder-Policy': 'require-corp',
|
||||
'Cross-Origin-Opener-Policy': 'same-origin',
|
||||
},
|
||||
devMiddleware: {
|
||||
writeToDisk: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (hasProxy) {
|
||||
mergedConfig.devServer.proxy = mergedConfig.devServer.proxy || {};
|
||||
mergedConfig.devServer.proxy = {
|
||||
[PROXY_TARGET]: {
|
||||
target: PROXY_DOMAIN,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
[`^${PROXY_PATH_REWRITE_FROM}`]: PROXY_PATH_REWRITE_TO,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (isProdBuild) {
|
||||
mergedConfig.plugins.push(
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].bundle.css',
|
||||
chunkFilename: '[id].css',
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return mergedConfig;
|
||||
};
|
||||
218
platform/app/.webpack/writePluginImportsFile.js
Normal file
218
platform/app/.webpack/writePluginImportsFile.js
Normal file
@@ -0,0 +1,218 @@
|
||||
const pluginConfig = require('../pluginConfig.json');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const glob = require('glob');
|
||||
|
||||
const autogenerationDisclaimer = `
|
||||
// THIS FILE IS AUTOGENERATED AS PART OF THE EXTENSION AND MODE PLUGIN PROCESS.
|
||||
// IT SHOULD NOT BE MODIFIED MANUALLY \n`;
|
||||
|
||||
const extractName = val => (typeof val === 'string' ? val : val.packageName);
|
||||
|
||||
function constructLines(input, categoryName) {
|
||||
let pluginCount = 0;
|
||||
|
||||
const lines = {
|
||||
importLines: [],
|
||||
addToWindowLines: [],
|
||||
};
|
||||
|
||||
if (!input) return lines;
|
||||
|
||||
input.forEach(entry => {
|
||||
if (entry.default === false) return;
|
||||
|
||||
const packageName = extractName(entry);
|
||||
|
||||
lines.addToWindowLines.push(`${categoryName}.push("${packageName}");\n`);
|
||||
|
||||
pluginCount++;
|
||||
});
|
||||
|
||||
return lines;
|
||||
}
|
||||
|
||||
function getFormattedImportBlock(importLines) {
|
||||
let content = '';
|
||||
// Imports
|
||||
importLines.forEach(importLine => {
|
||||
content += importLine;
|
||||
});
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
function getFormattedWindowBlock(addToWindowLines) {
|
||||
let content =
|
||||
'const extensions = [];\n' +
|
||||
'const modes = [];\n' +
|
||||
'\n// Not required any longer\n' +
|
||||
'window.extensions = extensions;\n' +
|
||||
'window.modes = modes;\n\n';
|
||||
|
||||
addToWindowLines.forEach(addToWindowLine => {
|
||||
content += addToWindowLine;
|
||||
});
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
function getRuntimeLoadModesExtensions(modules) {
|
||||
const dynamicLoad = [];
|
||||
dynamicLoad.push(
|
||||
'\n\n// Add a dynamic runtime loader',
|
||||
'async function loadModule(module) {',
|
||||
" if (typeof module !== 'string') return module;"
|
||||
);
|
||||
modules.forEach(module => {
|
||||
const packageName = extractName(module);
|
||||
if (!packageName) {
|
||||
return;
|
||||
}
|
||||
if (module.importPath) {
|
||||
dynamicLoad.push(
|
||||
` if( module==="${packageName}") {`,
|
||||
` const imported = await window.browserImportFunction('${module.importPath}');`,
|
||||
' return ' + (module.globalName ? `window["${module.globalName}"];` : `imported["${module.importName || 'default'}"];`),
|
||||
' }'
|
||||
);
|
||||
return;
|
||||
}
|
||||
dynamicLoad.push(
|
||||
` if( module==="${packageName}") {`,
|
||||
` const imported = await import("${packageName}");`,
|
||||
' return imported.default;',
|
||||
' }'
|
||||
);
|
||||
});
|
||||
// TODO - handle more cases for import than just default
|
||||
dynamicLoad.push(
|
||||
' return (await window.browserImportFunction(module)).default;',
|
||||
'}\n',
|
||||
'// Import a list of items (modules or string names)',
|
||||
'// @return a Promise evaluating to a list of modules',
|
||||
'export default function importItems(modules) {',
|
||||
' return Promise.all(modules.map(loadModule));',
|
||||
'}\n',
|
||||
'export { loadModule, modes, extensions, importItems };\n\n'
|
||||
);
|
||||
return dynamicLoad.join('\n');
|
||||
}
|
||||
|
||||
const fromDirectory = (srcDir, path) => {
|
||||
if (!path) return;
|
||||
if (path[0] === '.') return srcDir + '/../../..' + path.substring(1);
|
||||
if (path[0] === '~') return os.homedir() + path.substring(1);
|
||||
return path;
|
||||
};
|
||||
|
||||
const createCopyPluginToDistForLink = (srcDir, distDir, plugins, folderName) => {
|
||||
return plugins
|
||||
.map(plugin => {
|
||||
const fromDir = fromDirectory(srcDir, plugin.directory);
|
||||
const from = fromDir || `${srcDir}/../node_modules/${plugin.packageName}/${folderName}/`;
|
||||
const exists = fs.existsSync(from);
|
||||
return exists
|
||||
? {
|
||||
from,
|
||||
to: distDir,
|
||||
toType: 'dir',
|
||||
}
|
||||
: undefined;
|
||||
})
|
||||
.filter(x => !!x);
|
||||
};
|
||||
|
||||
const createCopyPluginToDistForBuild = (SRC_DIR, DIST_DIR, plugins, folderName) => {
|
||||
return plugins
|
||||
.map(plugin => {
|
||||
const from = `${SRC_DIR}/../../../node_modules/${plugin.packageName}/${folderName}/`;
|
||||
const exists = fs.existsSync(from);
|
||||
return exists
|
||||
? {
|
||||
from,
|
||||
to: DIST_DIR,
|
||||
toType: 'dir',
|
||||
}
|
||||
: undefined;
|
||||
})
|
||||
.filter(x => !!x);
|
||||
};
|
||||
|
||||
function writePluginImportsFile(SRC_DIR, DIST_DIR) {
|
||||
let pluginImportsJsContent = autogenerationDisclaimer;
|
||||
|
||||
const extensionLines = constructLines(pluginConfig.extensions, 'extensions');
|
||||
const modeLines = constructLines(pluginConfig.modes, 'modes');
|
||||
|
||||
pluginImportsJsContent += getFormattedImportBlock([
|
||||
...extensionLines.importLines,
|
||||
...modeLines.importLines,
|
||||
]);
|
||||
pluginImportsJsContent += getFormattedWindowBlock([
|
||||
...extensionLines.addToWindowLines,
|
||||
...modeLines.addToWindowLines,
|
||||
]);
|
||||
|
||||
pluginImportsJsContent += getRuntimeLoadModesExtensions([
|
||||
...pluginConfig.extensions,
|
||||
...pluginConfig.modes,
|
||||
...pluginConfig.public,
|
||||
]);
|
||||
|
||||
fs.writeFileSync(`${SRC_DIR}/pluginImports.js`, pluginImportsJsContent, { flag: 'w+' }, err => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// Build packages using cli add-mode and add-extension
|
||||
// will get added to the root node_modules, but the linked packages
|
||||
// will be hosted at the viewer node_modules.
|
||||
|
||||
const copyPluginPublicToDistBuild = createCopyPluginToDistForBuild(
|
||||
SRC_DIR,
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions],
|
||||
'public'
|
||||
);
|
||||
|
||||
const copyPluginPublicToDistLink = createCopyPluginToDistForLink(
|
||||
SRC_DIR,
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions, ...pluginConfig.public],
|
||||
'public'
|
||||
);
|
||||
|
||||
// Temporary way to copy chunks from the dist folder so that the become
|
||||
// available
|
||||
const copyPluginDistToDistBuild = createCopyPluginToDistForBuild(
|
||||
SRC_DIR,
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions],
|
||||
'dist'
|
||||
);
|
||||
|
||||
const copyPluginDistToDistLink = createCopyPluginToDistForLink(
|
||||
SRC_DIR,
|
||||
DIST_DIR,
|
||||
[...pluginConfig.modes, ...pluginConfig.extensions],
|
||||
'dist'
|
||||
);
|
||||
|
||||
console.warn('copy plugins', [
|
||||
...copyPluginPublicToDistBuild,
|
||||
...copyPluginPublicToDistLink,
|
||||
...copyPluginDistToDistBuild,
|
||||
...copyPluginDistToDistLink,
|
||||
]);
|
||||
return [
|
||||
...copyPluginPublicToDistBuild,
|
||||
...copyPluginPublicToDistLink,
|
||||
...copyPluginDistToDistBuild,
|
||||
...copyPluginDistToDistLink,
|
||||
];
|
||||
}
|
||||
|
||||
module.exports = writePluginImportsFile;
|
||||
Reference in New Issue
Block a user