WIP: drop parallel-webpack in favor of using webpack directly

[floryst]

Goal: speed up examples building

Could revisit this with vite instead (but would need to work with #3255)

Things that need to be addressed:

• npm run example runner
• markdown/documentation site entry generation

[daker]

I think it’d be great if we switched to Vite and phased out the UMD build.

[floryst]

Agreed. I'm mostly pushing this for reference, but vite would be the way to go down the road.

[daker]

not related to this PR but to webpack when trying to run the examples

Browserslist: browsers data (caniuse-lite) is 7 months old. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property '_assetEmittingPreviousFiles'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, ipc?, liveReload?, onListening?, open?, port?, proxy?, server?, app?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } 

[daker]

it's related to this commit: 3953b55#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R125-R128

i switched back to webpack-dev-server: 4.9.0

[jourdain]

@sankhesh

[daker]

@floryst are you willing to merge this ? for some reason the examples stopped building after the switch to lil-gui, i have made some fixes to the config file i can share with you.

[sankhesh]

@daker, do you mean that this fixes the examples build with lil-gui?

[daker]

Yes, the build with parallel-webpack is hanging and no errors are reported, but it works with webpack directly. Here is the updated config

Toggle me!

const path = require('path');
const glob = require('glob');
const WebpackHtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const settings = require('./webpack.settings.js');

const rootPath = path.resolve('.');
const distDir = path.resolve(rootPath, settings.paths.examples.base);
const templatePath = path.resolve(
  rootPath,
  'Utilities/ExampleRunner/template.html'
);
const baseURL = settings.paths.examples.base;

function configureVtkRules() {
  return [
    {
      test: /\.glsl$/i,
      loader: 'shader-loader',
    },
    {
      test: /\.js$/,
      include: path.resolve(__dirname, 'Sources'),
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      ],
    },
    {
      test: /\.css$/,
      exclude: /\.module\.css$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader' },
      ],
    },
    {
      test: /\.module\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[name]-[local]_[sha512:hash:base64:5]',
            },
          },
        },
        { loader: 'postcss-loader' },
      ],
    },
    {
      test: /\.svg$/,
      type: 'asset/source',
    },
    {
      test: /\.worker\.js$/,
      use: [{ loader: 'worker-loader', options: { inline: 'no-fallback' } }],
    },
  ];
}

function configureEntries() {
  const entries = {};

  glob.sync('Examples/**/index.js').forEach((entry) => {
    const exampleName = path.basename(path.dirname(entry));
    entries[exampleName] = path.resolve(rootPath, entry);
  });

  glob.sync('Sources/**/example/index.js').forEach((entry) => {
    const exampleName = path.basename(path.dirname(path.dirname(entry)));
    entries[exampleName] = path.resolve(rootPath, entry);
  });

  return entries;
}

function configureHtmlPlugins(entries) {
  return Object.keys(entries).map((chunkName) => {
    const entry = entries[chunkName];
    return new WebpackHtmlPlugin({
      filename: path.resolve(distDir, chunkName, 'index.html'),
      template: templatePath,
      chunks: [chunkName],
    });
  });
}

const entries = configureEntries();
const htmlPlugins = configureHtmlPlugins(entries);
const webpackConfig = {
  mode: 'production',
  entry: entries,
  output: {
    path: distDir,
    filename: '[name]/[name].js',
  },
  resolve: {
    alias: {
      '@kitware/vtk.js': path.resolve(__dirname, 'Sources'),
      'vtk.js': __dirname,
    },
    fallback: { stream: require.resolve('stream-browserify') },
  },
  module: {
    rules: [
      ...configureVtkRules(),
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.(png|jpg)$/i,
        type: 'asset',
      },
      {
        test: /\.(cj|h)son$/i,
        loader: 'hson-loader',
      },
    ],
  },
  plugins: [
    ...htmlPlugins,
    new webpack.DefinePlugin({
      __BASE_PATH__: "'" + baseURL + "'",
    }),
  ],
};

module.exports = webpackConfig;

[sankhesh]

@jourdain @finetjul Do you see any issues dropping parallel-webpack?

I'm guessing this is just for examples.

[jourdain]

Ideally we would move to vite. But the parallel-webpack was to prevent timeout on ci. If that is not an issue, we can proceed.

[daker]

@jourdain Do we still need to provide UMD builds?

[jourdain]

I think we can drop them... All browsers now support ESM. As long our doc use the esm and we don't have umd usage, that should be fine. (But we need to double check, it has been an eternity since I looked at vtk.js doc)

In general I still use UMD in trame, but those are just external builds and are not affected by how vtk.js is getting delivered.