replaced parcel with webpack, thank goodness

.node-version

@@ -0,0 +1 @@
+14.16.0

api.js

@@ -6,19 +6,29 @@ const finalhandler = require('finalhandler');
 const puppeteer = require('puppeteer');
 const chokidar = require('chokidar');
 const { performance } = require('perf_hooks');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackDevServer = require('webpack-dev-server');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const log = console.log.bind(console); // eslint-disable-line no-console
 const error = console.error.bind(console); // eslint-disable-line no-console
+const warn = console.warn.bind(console); // eslint-disable-line no-console
+let VERBOSE = false;
 
 const commands = {
-  async dev({ infile, outdir, outhtml, outpdf,  }) {
-    const watcher = chokidar.watch(path.join(outdir, outhtml, 'index.html'));
-    watcher.on('change', () => pdf({
-      fromUrl: 'http://localhost:1234',
+  dev({ infile, outdir, outhtml, outpdf,  }) {
+    const config = getWebpackConfig({
+      mode: 'development', infile, outdir, outhtml, outpdf,
+    });
+    const compiler = webpack(config);
+    const devServer = new WebpackDevServer(compiler, config.devServer);
+    const fileWatcher = chokidar.watch(path.join(outdir, outhtml, 'index.html'));
+    fileWatcher.on('change', () => pdf({
+      fromUrl: `http://${config.devServer.host}:${config.devServer.port}`,
       toFile: path.join(outdir, outpdf)
     }));
-    await spawnWrapper('npx', ['parcel', infile]);
-    await watcher.close();
+    devServer.listen(config.devServer.port, config.devServer.host);
   },
   test() {
     spawnWrapper('npx', ['eslint', '.'])
@@ -27,19 +37,20 @@ const commands = {
       });
   },
   build({ infile, outdir, outhtml, outpdf, publicUrl }) {
+    const compiler = webpack(
+      getWebpackConfig({ infile, outdir, outhtml, outpdf, publicUrl })
+    );
+    compiler.run(handleWebpackCompileErrors)
     const server = startStaticServer(outdir);
     server.on('listening', async () => {
-      await spawnWrapper('npx', [
-        'parcel', 'build', infile,
-        '--dist-dir', path.join(outdir, outhtml),
-        '--cache-dir', path.join(__dirname, '.parcel-cache'),
-        '--public-url', publicUrl,
-        '--no-cache'
-      ]);
-      await pdf({
-        fromUrl: `http://localhost:${server.address().port}${publicUrl}`,
-        toFile: path.join(outdir, outpdf)
-      });
+      try {
+        await pdf({
+          fromUrl: `http://localhost:${server.address().port}${publicUrl}`,
+          toFile: path.join(outdir, outpdf)
+        });
+      } catch (e) {
+        error(e);
+      }
       server.close();
     });
   },
@@ -61,7 +72,9 @@ function run(command, options = {}) {
     verbose = 0,
   } = options;
 
-  if (options.verbose > 0) {
+  if (options.verbose) VERBOSE = true;
+
+  if (VERBOSE) {
     log('node version %o', process.version);
     log('arguments: %o', { command, infile, outdir, outhtml, outpdf, publicUrl, verbose });
   }
@@ -121,13 +134,15 @@ function spawnWrapper(...args) {
     });
     proc.on('close', (code, signal) => {
       if (code === 0) {
+        if (VERBOSE) error({ code, signal, args });
         resolve();
       } else {
         reject(signal);
       }
     });
     proc.on('exit', (code, signal) => {
       if (code === 0) {
+        if (VERBOSE) error({ code, signal, args });
         resolve();
       } else {
         reject(signal);
@@ -140,5 +155,70 @@ function spawnWrapper(...args) {
   });
 }
 
+function handleWebpackCompileErrors(err, stats) {
+  if (err) {
+    error(err.stack || err);
+    if (err.details) {
+      error(err.details);
+    }
+    return;
+  }
+  const info = stats.toJson();
+  if (stats.hasErrors()) {
+    error(info.errors);
+  }
+  if (stats.hasWarnings()) {
+    warn(info.warnings);
+  }
+}
+
+function getWebpackConfig({
+  mode = 'production', infile, outdir, outhtml, outpdf, publicUrl
+}) {
+  // TODO what ot do with outpdf and publicUrl?
+  return {
+    entry: path.join(path.dirname(infile), 'index.js'),
+    mode,
+    output: {
+      path: path.resolve(__dirname, outdir),
+      filename: 'index.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.s[ac]ss$/ui,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'sass-loader'
+          ]
+        },
+        {
+          test: /\.(png|jpe?g|gif|webp|svg)$/ui, // eslint-disable-line prefer-named-capture-group
+          use: [
+            'file-loader',
+            'image-webpack-loader'
+          ],
+        },
+      ]
+    },
+    plugins: [
+      new MiniCssExtractPlugin(),
+      new HtmlWebpackPlugin({
+        filename: /\.html$/iu.test(outhtml) ? outhtml : path.join(outhtml, 'index.html'), // TODO test?
+        template: infile, // .replace('.html', '.ejs')
+        inject: true,
+      })
+    ],
+    stats: 'verbose',
+    devServer: {
+      open: true,
+      host: 'localhost',
+      port: 61000,
+      writeToDisk: file => /index.html/ui.test(file),
+      useLocalIp: false,
+    }
+  };
+}
 run.COMMANDS = Object.keys(commands);
 module.exports = run;