simplify commands and configs

Author: dannyrb

.webpack/webpack.config.js

@@ -0,0 +1,95 @@
+const path = require('path');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+// Plugins
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+const ENTRY_VTK_EXT = path.join(__dirname, './../src/index.js');
+const SRC_PATH = path.join(__dirname, './../src');
+const OUT_PATH = path.join(__dirname, './../dist');
+
+/**
+ * `argv` are options from the CLI. They will override our config here if set.
+ * `-d` - Development shorthand, sets `debug`, `devtool`, and `mode`
+ * `-p` - Production shorthand, sets `minimize`, `NODE_ENV`, and `mode`
+ */
+module.exports = (env, argv) => {
+  const isProdBuild = argv.mode !== 'development';
+  const outputFilename = isProdBuild ? '[name].umd.min.js' : '[name].umd.js';
+
+  return {
+    entry: {
+      vtkViewport: ENTRY_VTK_EXT,
+    },
+    devtool: 'source-map',
+    output: {
+      path: OUT_PATH,
+      filename: outputFilename,
+      library: 'VTKViewport',
+      libraryTarget: 'umd',
+      globalObject: 'this',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: ['babel-loader'],
+        },
+        {
+          test: /\.css$/,
+          exclude: /\.module\.css$/,
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
+              },
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      modules: [path.resolve(__dirname, './../node_modules'), SRC_PATH],
+    },
+    externals: [
+      // :wave:
+      /\b(vtk.js)/,
+      // Used to build/load metadata
+      {
+        'cornerstone-core': {
+          commonjs: 'cornerstone-core',
+          commonjs2: 'cornerstone-core',
+          amd: 'cornerstone-core',
+          root: 'cornerstone',
+        },
+        // Vector 3 use
+        'cornerstone-math': {
+          commonjs: 'cornerstone-math',
+          commonjs2: 'cornerstone-math',
+          amd: 'cornerstone-math',
+          root: 'cornerstoneMath',
+        },
+        //
+        react: 'react',
+      },
+    ],
+    node: {
+      // https://github.com/webpack-contrib/style-loader/issues/200
+      Buffer: false,
+    },
+    plugins: [
+      // Uncomment to generate bundle analyzer
+      // new BundleAnalyzerPlugin(),
+      // Show build progress
+      new webpack.ProgressPlugin(),
+      // Clear dist between builds
+      // new CleanWebpackPlugin(),
+    ],
+  };
+};

webpack.dev-server.js .webpack/webpack.dev.js

@@ -1,39 +1,44 @@
 /**
  * vtkRules contains three rules:
- * 
+ *
  * - shader-loader
  * - babel-loader
  * - worker-loader
- * 
- * The defaults work fine for us here, but it's worth noting that...
+ *
+ * The defaults work fine for us here, but it's worth noting that for a UMD build,
+ * we would like likely want to inline web workers. An application consuming this package
+ * will likely want to use a non-default loader option:
+ *
+ * {
+ *   test: /\.worker\.js$/,
+ *   include: /vtk\.js[\/\\]Sources/,
+ *   use: [
+ *     {
+ *       loader: 'worker-loader',
+ *       options: { inline: true, fallback: false },
+ *     },
+ *   ],
+ * },
  */
-// test: /\.worker\.js$/,
-// include: /vtk\.js[\/\\]Sources/,
-// use: [
-//     {
-//       loader: 'worker-loader',
-//       options: { inline: true, fallback: false },
-//     },
-//   ],
-// },
 
-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
+const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core
+  .rules;
 // Plugins
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-const ENTRY_VTK_EXT = path.join(__dirname, './src/index.js')
-const ENTRY_EXAMPLES = path.join(__dirname, './examples/index.js')
-const SRC_PATH = path.join(__dirname, './src')
-const OUT_PATH = path.join(__dirname, './dist')
+const ENTRY_VTK_EXT = path.join(__dirname, './../src/index.js');
+const ENTRY_EXAMPLES = path.join(__dirname, './../examples/index.js');
+const SRC_PATH = path.join(__dirname, './../src');
+const OUT_PATH = path.join(__dirname, './../dist');
 
 module.exports = {
   entry: {
-    examples: ENTRY_EXAMPLES
+    examples: ENTRY_EXAMPLES,
   },
   devtool: 'source-map',
   output: {
@@ -67,10 +72,10 @@ module.exports = {
     ].concat(vtkRules),
   },
   resolve: {
-    modules: [path.resolve(__dirname, 'node_modules'), SRC_PATH],
+    modules: [path.resolve(__dirname, './../node_modules'), SRC_PATH],
     alias: {
-      '@vtk-viewport': ENTRY_VTK_EXT
-    }
+      '@vtk-viewport': ENTRY_VTK_EXT,
+    },
   },
   plugins: [
     // Show build progress
@@ -80,12 +85,12 @@ module.exports = {
     // Generate `index.html` with injected build assets
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: path.resolve(__dirname, 'public', 'index.html'),
+      template: path.resolve(__dirname, '..', 'public', 'index.html'),
     }),
     // Copy "Public" Folder to Dist (test data)
     new CopyWebpackPlugin([
       {
-        from: path.resolve(__dirname, 'public'),
+        from: path.resolve(__dirname, '..', 'public'),
         to: OUT_PATH,
         toType: 'dir',
         ignore: ['index.html', '.DS_Store'],
@@ -99,5 +104,5 @@ module.exports = {
     open: true,
     port: 3000,
     historyApiFallback: true,
-  }
-}
+  },
+};

package.json

@@ -11,19 +11,22 @@
     "npm": ">=5"
   },
   "scripts": {
-    "build": "webpack --progress --colors --mode development",
-    "build:release": "webpack --progress --colors --mode production",
-    "dev": "webpack-dev-server --config ./webpack.dev-server.js --watch",
+    "build": "webpack --progress --colors --config ./.webpack/webpack.config.js -d",
+    "build:release": "webpack --progress --colors --config ./.webpack/webpack.config.js -p",
+    "dev": "webpack-dev-server --config ./webpack.dev.js --watch",
     "start": "yarn run dev",
     "predeploy": "cd example && yarn install && yarn run build:release",
-    "prepublishOnly": "yarn run build:release",
+    "prepublishOnly": "yarn run build && yarn run build:release",
     "deploy": "gh-pages -d example/build",
     "generateStaticSite": "./generateStaticSite.sh"
   },
   "peerDependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
+  "dependencies": {
+    "date-fns": "^2.2.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/plugin-external-helpers": "^7.2.0",
@@ -87,19 +90,13 @@
       "git add"
     ]
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",
-    "not ie <= 11",
+    "not ie < 11",
     "not op_mini all"
   ],
   "files": [
     "dist"
-  ],
-  "dependencies": {
-    "date-fns": "^2.2.1"
-  }
+  ]
 }