build(Webpack): Fix UMD config and add dev-server support

doc/RELEASE.md

@@ -21,10 +21,10 @@ git add -- src/itk-wasm-cli.js
 git commit -m "feat(itk-wasm-cli): Update default Docker image for ${version}"
 ```
 
-Bump `version` in `package.json`, `package-lock.json`, `src/itkConfig.ts`.
+Bump `version` in `package.json`, `package-lock.json`, `src/itkConfig.ts`. `itkConfigDevelopment.ts`
 
 ```
-git add -- package.json package-lock.json src/itkConfig.ts
+git add -- package.json package-lock.json src/itkConfig.ts webpack.config.cjs
 git commit -m "feat(version): Bump version to ${version}"
 npm run build
 npm run test

examples/UMD/dist/index.html

@@ -4,7 +4,7 @@
     <title>itk-wasm UMD Example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="styles.css">
-    <script src="https://cdn.jsdelivr.net/npm/itk-wasm@1.0.0-b.8/dist/umd/itk-wasm.min.js"></script>
+    <script src="./itk-wasm.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@11.12.3/dist/itkVtkViewer.js"></script>
   </head>
 

package.json

@@ -27,13 +27,14 @@
     "build": "npm run build:emscripten && npm run build:tsc && npm run build:tscWorkersModuleLoader && npm run build:tscWebWorkers && npm run build:workerBundles && npm run build:workerMinBundles && npm run build:webpack && node ./src/io/internal/packages/package-json-gen.cjs",
     "build:debug": "npm run build:emscripten -- --debug && npm run build:tsc && npm run build:tscWorkersModuleLoader && npm run build:tscWebWorkers && npm run build:workerBundles && npm run build:workerMinBundles && npm run build:webpack -- --mode development",
     "build:tsc": "tsc --pretty",
-    "build:tscWorkersModuleLoader": "tsc --lib webworker --rootDir ./src/ --outDir ./dist/ --moduleResolution node --target es2017 --module es2020 --strict --forceConsistentCasingInFileNames --declaration ./src/core/internal/loadEmscriptenModuleWebWorker.ts",
+    "build:tscWorkersModuleLoader": "tsc --types --lib es2017,webworker --rootDir ./src/ --outDir ./dist/ --moduleResolution node --target es2017 --module es2020 --strict --forceConsistentCasingInFileNames --declaration ./src/core/internal/loadEmscriptenModuleWebWorker.ts",
     "build:tscWebWorkers": "tsc -p ./tsconfigWebWorkers.json",
     "build:workerBundles": "rollup -c rollup.worker.config.js ./dist/web-workers/pipeline.worker.js",
     "build:workerMinBundles": "rollup -c rollup.worker.min.config.js ./dist/web-workers/pipeline.worker.js",
-    "build:webpack": "webpack --progress --color",
+    "build:webpack": "webpack --mode production --progress --color",
     "build:emscripten": "node ./src/build-emscripten.js",
     "build:wasi": "node ./src/build-wasi.js",
+    "start": "webpack-dev-server --mode development --env DEVSERVER",
     "test:wasi": "npm run test:cliRun && npm run test:cliTest",
     "test": "npm run test:lint && npm run test:node && npm run test:browser",
     "test:lint": "ts-standard --fix \"src/**/*.ts\" && standard --fix \"test/**/*.js\"",
@@ -78,7 +79,7 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "@types/estree": "0.0.50",
+    "@types/estree": "0.0.51",
     "@types/mime-types": "^2.1.1",
     "assert": "^2.0.0",
     "async": "^3.2.1",
@@ -100,17 +101,21 @@
     "process": "^0.11.10",
     "puppeteer": "^10.4.0",
     "readable-stream": "^3.6.0",
+    "resolve-typescript-plugin": "^1.2.0",
     "rollup": "^2.58.0",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^19.0.2",
     "standard": "^16.0.4",
     "stream-browserify": "^3.0.0",
     "tap-spec": "^5.0.0",
     "tape": "^4.13.0",
+    "ts-loader": "^9.3.1",
     "ts-standard": "^11.0.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.55.1",
-    "webpack-cli": "^4.8.0"
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
+    "webpackbar": "^5.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",

src/itkConfigDevServer.js

@@ -0,0 +1,9 @@
+const itkConfig = {
+  webWorkersUrl: undefined,
+  pipelineWorkerUrl: `/web-workers/bundles/pipeline.worker.js`,
+  imageIOUrl: `/image-io`,
+  meshIOUrl: `/mesh-io`,
+  pipelinesUrl: `/pipeline`
+}
+
+export default itkConfig

src/itkConfigDevelopment.ts

@@ -0,0 +1,11 @@
+const version = '1.0.0-b.15'
+
+const itkConfig = {
+  webWorkersUrl: undefined,
+  pipelineWorkerUrl: `https://cdn.jsdelivr.net/npm/itk-wasm@${version}/dist/web-workers/bundles/pipeline.worker.js`,
+  imageIOUrl: `https://cdn.jsdelivr.net/npm/itk-image-io@${version}`,
+  meshIOUrl: `https://cdn.jsdelivr.net/npm/itk-mesh-io@${version}`,
+  pipelinesUrl: `https://cdn.jsdelivr.net/npm/itk-wasm@${version}/dist/pipeline`
+}
+
+export default itkConfig

tsconfig.json

@@ -10,6 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
+    "sourceMap": true,
     "typeRoots": ["./node_modules/@types", "./src/vendor-types"]
   },
   "include": ["./src/**/*"],

webpack.config.cjs

@@ -2,13 +2,17 @@ const path = require('path')
 
 const webpack = require('webpack')
 
-const entry = path.join(__dirname, 'dist', 'browser', 'index.js')
+const ResolveTypeScriptPlugin = require("resolve-typescript-plugin")
+const { config } = require('process')
+const WebPackBar = require('webpackbar')
+
+const entry = path.join(__dirname, 'src', 'browser', 'index.ts')
 const outputPath = path.join(__dirname, 'dist', 'umd')
 
-const packageJSON = require('./package.json')
-const cdnPath = 'https://cdn.jsdelivr.net/npm/'
-// const cdnPath = `https://unpkg.com/'
-const cdnConfig = path.resolve(__dirname, 'src', 'itkConfigCDN.js')
+const configDevelopment = path.resolve(__dirname, 'dist', 'itkConfigDevelopment.js')
+const configProduction = path.resolve(__dirname, 'dist', 'itkConfig.js')
+const configDevServer = path.resolve(__dirname, 'src', 'itkConfigDevServer.js')
+
 const library = {
   type: 'umd',
   name: 'itk'
@@ -21,58 +25,90 @@ const moduleConfig = {
         loader: 'babel-loader',
         options: { presets: ['@babel/preset-env'] }
       }
-    }
+    },
+    {
+      test: /\.ts$/,
+      use: 'ts-loader',
+      exclude: /node_modules/,
+    },
   ]
 }
-const resolve = {
-  modules: [path.resolve(__dirname, 'node_modules')],
-  fallback: { fs: false, path: false, url: false, module: false },
-  alias: {
-    '../itkConfig.js': cdnConfig,
-    '../../itkConfig.js': cdnConfig
-  }
-}
+const fallback = { fs: false, path: false, url: false, module: false }
+const modules = [path.resolve(__dirname, 'node_modules')]
 const performance = {
   maxAssetSize: 10000000
 }
-const plugins = [
-  new webpack.DefinePlugin({
-    __itk_version__: JSON.stringify(packageJSON.version)
-  })
-]
 
 const stats = 'errors-only'
 
-module.exports = [{
+const devServer = {
+  port: 8083,
+  devMiddleware: {
+    writeToDisk: true,
+  },
+  static: [
+    {
+      publicPath: '/test-data',
+      directory: path.join(__dirname, 'build-emscripten', 'ExternalData', 'test', 'Input'),
+      staticOptions: {
+        dotfiles: 'allow',
+      },
+    },
+    {
+      publicPath: '/web-workers',
+      directory: path.join(__dirname, 'dist', 'web-workers'),
+    },
+    {
+      publicPath: '/image-io',
+      directory: path.join(__dirname, 'dist', 'image-io'),
+    },
+    {
+      publicPath: '/mesh-io',
+      directory: path.join(__dirname, 'dist', 'mesh-io'),
+    },
+    {
+      publicPath: '/pipeline',
+      directory: path.join(__dirname, 'dist', 'pipeline'),
+    },
+    {
+      publicPath: '/',
+      directory: path.join(__dirname, 'dist', 'umd'),
+      staticOptions: {
+        dotfiles: 'allow',
+      },
+    },
+  ],
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+  },
+}
+
+module.exports = (env, argv) => [
+  {
   name: 'development',
   mode: 'development',
   stats,
   entry,
   output: {
     path: outputPath,
-    filename: 'itk-wasm.js',
-    publicPath: cdnPath,
+    filename: argv.mode === 'development' ? 'itk-wasm.js' : 'itk-wasm.min.js',
     library
   },
   module: moduleConfig,
-  resolve,
-  plugins,
-  performance
-},
-{
-  name: 'production',
-  mode: 'production',
-  stats,
-  entry,
-  output: {
-    path: outputPath,
-    filename: 'itk-wasm.min.js',
-    publicPath: cdnPath,
-    library
+  resolve: {
+    modules,
+    fallback,
+    alias: {
+      '../itkConfig.js': argv.mode === 'development' ? env.DEVSERVER ? configDevServer : configDevelopment : configProduction,
+      '../../itkConfig.js': argv.mode === 'development' ? env.DEVSERVER ? configDevServer : configDevelopment : configProduction,
+    },
+    plugins: [new ResolveTypeScriptPlugin()],
   },
-  module: moduleConfig,
-  resolve,
-  plugins,
-  performance
-}
+  performance,
+  plugins: [new WebPackBar(),],
+  devtool: argv.mode === 'development' ? 'eval-cheap-module-source-map' : 'source-map',
+  devServer,
+},
 ]