TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: measurementsAPI issue caused by production build (#842)

Browse Source 
* ci: test docs-publish

* Specify to use prod

* Babel should transpile with env set by webpack

* in-progress

* in-progress

* Polyfill for ie11 and edge features

* Ditch polyfills w/ babel - we'll use a service for now

* Bump tools version; shift vtk.js up a layer

* Specify we shouldn't target older than IE 11

* ditch babel plugins that should be covered by preset-env

* Add a top level build demo command

* Let our babel config determine settings

* Same babel fixes as PWA

* Rebuild deps that don't satisfy our target

* Mini helper script for excluding all node_modules, except...

* Shift vtk.js dep up a layer

* Kill core-js

* Export in a node happy way

* Updated yarn lock

* Set NODE_ENV when launching anything w/ WebPack

* docs: updated FAQ

* docs: on browser support

* Add support for redux browser extension

* misc. small clean-up

* docs: Remove roadmap page; add browser-support to sidebar

* Formatting

* Remove roadmap links

* Formatting

* ci: Remove config syntax error

* Simplified bug report template

* update community request template

* Update question's template

* simplify build scripts

* specify new script names

* fix: for measurement api being pruned by minimizer in prod builds

* Use named exports

* Simplify config

* Let's not do so much heavy lifting for a dev-server build

* fix dev build

* Add hotkeys to demo

* fix: jest babel config and env specific configs

* Remove call to non-existant command

* Shift experimental proposal plugin up a layer

* Use `https`

* Try with reduced number of package exceptions

* Try to resolve cypress issue

* Try to fix cypress issue in CI

* Skip https
This commit is contained in:
Danny Brown authored and GitHub committed 2019-09-04 13:53:13 -04:00
1 parent 25e7232660
commit 49d343941e
63 files changed
+1773 -813
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/viewer/.webpack/all.dev.js
-74
View File
@@ -1,74 +0,0 @@
/**
* Notice that we're not extracting CSS or generating a service-worker. This
* may create a slightly inconsistent experience, but should allow for faster/
* easier development.
*
* We do still need to generate the "index.html" and copy over files from
* "public/" so our `webpack-dev-server` can _serve_ them for us :+1:
*/
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const webpackCommon = require('./../../../.webpack/webpack.common.js');
// Plugins
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Const
const SRC_DIR = path.join(__dirname, '../src');
const DIST_DIR = path.join(__dirname, '../dist');
const PUBLIC_DIR = path.join(__dirname, '../public');
const ASSET_PATH = process.env.ASSET_PATH || '/';
// 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';
module.exports = (env, argv) => {
const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
return merge(commonConfig, {
// https://webpack.js.org/configuration/mode/#mode-development
mode: 'development',
output: {
path: DIST_DIR, // push to common?
publicPath: ASSET_PATH,
// filename: '[name].bundle.js',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// Copy "Public" Folder to Dist
new CopyWebpackPlugin([
{
from: PUBLIC_DIR,
to: DIST_DIR,
toType: 'dir',
// Ignore our HtmlWebpackPlugin template file
// Ignore our configuration files
ignore: ['config/*', 'html-templates/*', '.DS_Store'],
},
// Copy over and rename our target app config file
{
from: `${PUBLIC_DIR}/${APP_CONFIG}`,
to: `${DIST_DIR}/app-config.js`,
},
]),
// Generate "index.html" w/ correct includes/imports
new HtmlWebpackPlugin({
template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
filename: 'index.html',
templateParameters: {
PUBLIC_URL: PUBLIC_URL,
},
}),
],
// https://webpack.js.org/configuration/dev-server/
devServer: {
hot: true,
open: true,
port: 3000,
historyApiFallback: {
disableDotRule: true,
},
},
});
};
platform/viewer/.webpack/rules/extractStyleChunks.js
+35
View File
@@ -0,0 +1,35 @@
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
function extractStyleChunks(isProdBuild) {
return [
{
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',
// 'sass-loader',
],
},
];
}
module.exports = extractStyleChunks;
platform/viewer/.webpack/rules/fontsToJavaScript.js
+20
View 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;
platform/viewer/.webpack/commonjs.prod.js → platform/viewer/.webpack/webpack.commonjs.js
+3 -24
View File
@@ -1,9 +1,9 @@
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const webpackCommon = require('./../../../.webpack/webpack.common.js');
const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
//
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const fontsToJavaScriptRule = require('./rules/fontsToJavaScript.js');
// const
const SRC_DIR = path.join(__dirname, '../src');
const DIST_DIR = path.join(__dirname, '../dist');
@@ -12,8 +12,6 @@ module.exports = (env, argv) => {
const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
return merge(commonConfig, {
// https://webpack.js.org/configuration/mode/#mode-production
mode: 'production',
entry: {
bundle: `${SRC_DIR}/index-umd.js`,
},
@@ -39,27 +37,8 @@ module.exports = (env, argv) => {
libraryTarget: 'umd',
filename: 'index.umd.js',
},
/**
* 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.
*/
module: {
rules: [
{
test: /\.(ttf|eot|woff|woff2)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
],
rules: [fontsToJavaScriptRule],
},
plugins: [
// Clean output.path
platform/viewer/.webpack/pwa.prod.js → platform/viewer/.webpack/webpack.pwa.js
+58 -90
View File
@@ -1,34 +1,40 @@
// ~~ WebPack
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const webpackCommon = require('./../../../.webpack/webpack.common-pwa.js');
// Plugins
const webpackBase = require('./../../../.webpack/webpack.base.js');
// ~~ Plugins
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const workboxPlugin = require('workbox-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
//
// ~~ Rules
const extractStyleChunksRule = require('./rules/extractStyleChunks.js');
// ~~ Directories
const SRC_DIR = path.join(__dirname, '../src');
const DIST_DIR = path.join(__dirname, '../dist');
const PUBLIC_DIR = path.join(__dirname, '../public');
// Env Vars
// ~~ 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';
module.exports = (env, argv) => {
const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
const isProdBuild = process.env.NODE_ENV === 'production';
return merge(commonConfig, {
// https://webpack.js.org/configuration/mode/#mode-production
mode: 'production',
// Out of memory -- Code Split
// devtool: 'source-map',
const mergedConfig = merge(baseConfig, {
devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
output: {
path: DIST_DIR,
filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
},
stats: {
colors: true,
hash: true,
@@ -41,86 +47,31 @@ module.exports = (env, argv) => {
warnings: true,
},
optimization: {
minimize: true,
minimize: isProdBuild,
sideEffects: true,
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
output: {
path: DIST_DIR,
filename: '[name].bundle.[chunkhash].js',
publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
// // TODO: For more granular minimize
// // minimizer: [
// // new TerserJSPlugin({
// // sourceMap: true,
// // terserOptions: {
// // sourceMap: {
// // file: '[name].map',
// // url: 'https://my-host/[url]',
// // },
// // },
// // }),
// // new OptimizeCSSAssetsPlugin({}),
// // ],
},
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: process.env.NODE_ENV === 'development',
},
},
{ loader: 'css-loader' },
{ loader: 'stylus-loader' },
],
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
// 'sass-loader',
],
},
],
rules: [...extractStyleChunksRule(isProdBuild)],
},
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: process.env.NODE_ENV === 'development',
},
},
{ loader: 'css-loader' },
{ loader: 'stylus-loader' },
],
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: process.env.NODE_ENV === 'development',
},
},
'css-loader',
'postcss-loader',
// 'sass-loader',
],
},
],
},
// TODO:
// Do we need to rip anything out of the more generic common.js we're
// merging with this?
plugins: [
// Uncomment to generate bundle analyzer
// new BundleAnalyzerPlugin(),
// Clean output.path
new CleanWebpackPlugin(),
// "Public" Folder
// Copy "Public" Folder to Dist
new CopyWebpackPlugin([
{
from: PUBLIC_DIR,
@@ -142,10 +93,7 @@ module.exports = (env, argv) => {
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
/**
* This generates our index.html file from the specified template.
* This is the easiest way to inject custom configuration and extensions.
*/
// Generate "index.html" w/ correct includes/imports
new HtmlWebpackPlugin({
template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
filename: 'index.html',
@@ -154,11 +102,31 @@ module.exports = (env, argv) => {
},
// favicon: `${PUBLIC_DIR}/favicon.ico`,
}),
new workboxPlugin.GenerateSW({
new WorkboxPlugin.GenerateSW({
swDest: 'sw.js',
clientsClaim: true,
skipWaiting: true,
}),
],
// 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,
hot: true,
open: true,
port: 3000,
historyApiFallback: {
disableDotRule: true,
},
},
});
if (!isProdBuild) {
mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return mergedConfig;
};